lement-ui table表头如何筛选并修改筛选图标的样式
时间: 2023-09-03 13:04:24 浏览: 517
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
5星 · 资源好评率100%
要筛选和修改Element-UI表头的筛选图标样式,你可以使用`el-table-column`组件的`filters`和`filter-icon`属性来实现。
首先,在`el-table-column`组件中设置`filters`属性来定义筛选项。`filters`属性是一个数组,每一项是一个筛选项对象,包含`label`和`value`属性,分别表示筛选项的显示文本和筛选值。例如:
```
<el-table-column prop="name" label="姓名" :filters="[{label: '小明', value: 'xiaoming'}, {label: '小红', value: 'xiaohong'}]"></el-table-column>
```
然后,在`el-table-column`组件中使用`filter-icon`插槽来修改筛选图标的样式。在该插槽中,你可以自定义筛选图标的样式。例如:
```
<el-table-column prop="name" label="姓名" :filters="[{label: '小明', value: 'xiaoming'}, {label: '小红', value: 'xiaohong'}]">
<template slot="filter-icon" slot-scope="scope">
<i class="custom-icon" :class="{'icon-selected': scope.filteredValue}"></i>
</template>
</el-table-column>
```
在上面的例子中,我们使用了一个自定义的`custom-icon`样式类来代替默认的筛选图标,并根据`filteredValue`属性来动态添加`icon-selected`样式类来表示当前筛选项是否被选中。
这样,当你在表头上点击筛选图标时,将会显示自定义的筛选图标,并根据当前选中的筛选项添加样式。
以上就是如何筛选并修改Element-UI表头的筛选图标样式的方法。
阅读全文