Element Plus的表格组件的筛选图标改变

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

Elment Plus 表格链接

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

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

所以这个就不能进行插入到自带位置的图标。就只能使用导入阿里巴巴图标库进行替换图标。

如何进行替换掉表格组件自带的过滤图标？

使用表格组件生成表格

1.  
   <el-table ref="tableRef" row-key="date" :data="tableData" class="date-icon" style="width: 100%">
2.  
   <el-table-column
3.  
   prop="date"
4.  
   label="Date"
5.  
   sortable
6.  
   width="180"
7.  
   column-key="date"
8.  
   :filters="[
9.  
   { text: '2016-05-01', value: '2016-05-01' },
10.  
    { text: '2016-05-02', value: '2016-05-02' },
11.  
    { text: '2016-05-03', value: '2016-05-03' },
12.  
    { text: '2016-05-04', value: '2016-05-04' },
13.  
    ]"
14.  
    :filter-method="filterHandler"
15.  
    />
16.  
    <el-table-column prop="name" label="Name" width="180" />
17.  
    <el-table-column prop="address" label="Address" :formatter="formatter" />
18.  
     
19.  
    <el-table-column
20.  
    prop="tag"
21.  
    label="Tag"
22.  
    width="100"
23.  
    :filters="[
24.  
    { text: 'Home', value: 'Home' },
25.  
    { text: 'Office', value: 'Office' },
26.  
    ]"
27.  
    :filter-method="filterTag"
28.  
    filter-placement="bottom-end"
29.  
    >
30.  
    <template #default="scope">
31.  
    <el-tag
32.  
    :type="scope.row.tag === 'Home' ? '' : 'success'"
33.  
    disable-transitions
34.  
    >{{ scope.row.tag }}</el-tag
35.  
    >
36.  
    </template>
37.  
    </el-table-column>
38.  
    </el-table>

其中的el-table-column标签就是每表格组件的每一列，对想要开启的筛选的列添加:filters="[]" 设置筛选条件，无法在el-table-column中设置单独的class或者style。

在el-table标签上设置一个属于这个表格的类名，通过这个类名获取到原本样式中关于表格组件自带的筛选图标。上面我使用的类名是date-icon。

1.  
   ::v-deep .date-icon .el-icon:before {
2.  
   font-family: "iconfont" !important;
3.  
   -webkit-font-smoothing: antialiased;
4.  
   -moz-osx-font-smoothing: grayscale;
5.  
   font-style: normal;
6.  
   content: "\e948";
7.  
   }

其中伪类的content内容是使用的阿里巴巴图标库中想使用图标的16进制编码

获取阿里巴巴16进制编码

1. 先进入到资源管理的页面

2. 选择想要替换的图标

3. 点击编辑按钮

4. 就可以看见16进制编码了