公司ui绘制的一个管理系统的表格组件,其中表格需要带有筛选功能,就是表头右上角有个图标,但是element的表格组件里面本来就是自带有筛选功能的,但是自带的筛选是下拉框相同的图标

,但是捏!!ui说这个图标不是很好看,就问我可以改变一下这个图标的样式吗?

当时我一直在尝试使用Element Plus中自带的图标是否可以使用,但是你会发现Element Plus 中的图标都是使用svg创建的单独的页面进行调用这个页面然后才能使用图标

所以这个就不能进行插入到自带位置的图标。就只能使用导入阿里巴巴图标库进行替换图标。
如何进行替换掉表格组件自带的过滤图标?
使用表格组件生成表格
<el-table ref="tableRef" row-key="date" :data="tableData" class="date-icon" style="width: 100%">
<el-table-column
prop="date"
label="Date"
sortable
width="180"
column-key="date"
:filters="[
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
{ text: '2016-05-03', value: '2016-05-03' },
{ text: '2016-05-04', value: '2016-05-04' },
]"
:filter-method="filterHandler"
/>
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" :formatter="formatter" />
<el-table-column
prop="tag"
label="Tag"
width="100"
:filters="[
{ text: 'Home', value: 'Home' },
{ text: 'Office', value: 'Office' },
]"
:filter-method="filterTag"
filter-placement="bottom-end"
>
<template #default="scope">
<el-tag
:type="scope.row.tag === 'Home' ? '' : 'success'"
disable-transitions
>{{ scope.row.tag }}</el-tag
>
</template>
</el-table-column>
</el-table>
其中的el-table-column标签就是每表格组件的每一列,对想要开启的筛选的列添加:filters="[]" 设置筛选条件,无法在el-table-column中设置单独的class或者style。
在el-table标签上设置一个属于这个表格的类名,通过这个类名获取到原本样式中关于表格组件自带的筛选图标。上面我使用的类名是date-icon。
::v-deep .date-icon .el-icon:before {
font-family: "iconfont" !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
content: "\e948";
}
其中伪类的content内容是使用的阿里巴巴图标库中想使用图标的16进制编码
获取阿里巴巴16进制编码
先进入到资源管理的页面
选择想要替换的图标
点击编辑按钮

就可以看见16进制编码了

以上就是我改变Element Plus表格组件筛选功能图标替换的方法,如果哪位大佬有更好用的方法可以留言哟~~~ 不喜欢的话轻点喷!!!