el-table切换的时候清除排序箭头的高亮图标
时间: 2023-10-27 15:18:38 浏览: 150
高亮显示替换特定字符排序
可以通过监听 el-table 的 `current-change` 事件,在事件回调函数中清除排序箭头的高亮图标。
具体实现方法如下:
1. 在 el-table 上添加 `@current-change` 监听事件,如下所示:
```html
<el-table :data="tableData" @current-change="clearSort">
<!-- 表格列定义 -->
</el-table>
```
2. 在事件回调函数中清除排序箭头的高亮图标,代码如下:
```js
methods: {
clearSort() {
this.$nextTick(() => {
const sortColumns = this.$refs.table.store.states.sortColumns;
sortColumns.forEach(column => {
column.order = null;
});
});
},
}
```
上述代码中,我们通过 `this.$refs.table.store.states.sortColumns` 获取当前表格的排序列数组,然后遍历数组并将每个排序列的 `order` 属性设为 `null`,从而清除排序箭头的高亮图标。
需要注意的是,由于修改了 el-table 的 `sortColumns` 属性,因此需要使用 `$nextTick` 方法在下一次 DOM 更新后再执行清除操作,以免出现更新不及时的问题。
阅读全文