轻松修改el-table的表头筛选icon图标

bachelor982024-04-07 16:34

如图所示，element-ui中的el-table的筛选图标一直是"下箭头"。

这和设计稿不相符，但是他的下拉多选框又是符合设计稿设计，那有没有什么简单的方式，不通过slot来自己重新编写表头，直接修改icon图标呢？

代码实现

其实很简单，直接通过css就可以实现。

css 复制代码

.el-table__column-filter-trigger i {
    //由于我需要的icon不是element-ui中的，因此需要替换
    //如果你需要的icon在element-ui中就不需要这行
    font-family: "jg-iconfont" !important;
    
    font-size: 13px; //通过保持和标题的字体大小一致来实现居中
    
    transform: scale(1.3); //通过scale来实现icon的放大和缩小
}

.el-icon-arrow-down:before {
    content:'\e605' //要替换的图标
}

那么如何查看要替换的icon的content呢？

可以通过f12直接查看element-ui文档中icon对应的content。

实际效果

由于公司这边规定是在extends.scss中统一进行样式修订，作为原样式的扩展，因此我也在此进行修订。