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

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

Elment Plus 表格链接

，但是捏！！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进制编码

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

2. 选择想要替换的图标

3. 点击编辑按钮

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

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