如何清除el-table sortable的高亮选中排序
时间: 2024-09-26 18:12:08 浏览: 39
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
在Element UI的`el-table`组件中,如果你想清除排序列的高亮选中状态,你可以通过`sort-method`属性提供的回调函数来控制排序的行为。当用户点击排序按钮时,这个回调会被触发,并提供当前的列和排序方式。你可以在回调中手动清空选中状态。
首先,你需要设置一个自定义的`sort-method`:
```html
<template>
<el-table :data="tableData" :sort-method="customSortMethod">
<!-- ... -->
</el-table>
</template>
<script>
export default {
methods: {
customSortMethod(column, order) {
// 当点击排序时,取消之前的高亮并设置新的排序
this.$refs.table.setCurrentColumn(null);
this.currentSortOrder = order; // 更新全局变量
// 具体操作,例如更新数据排序
this.data.sort((a, b) => {
if (column.order === 'descend') {
return a[column.key] > b[column.key] ? -1 : 1;
} else {
return a[column.key] < b[column.key] ? -1 : 1;
}
});
},
},
data() {
return {
tableData: ..., // 表格数据
currentSortOrder: '', // 存储当前排序方式
};
},
};
</script>
```
在这个例子中,`setCurrentColumn(null)`会取消当前列的高亮,`this.currentSortOrder`用于跟踪当前的排序方向。当你需要的时候,可以调整这部分代码以满足你的需求。
阅读全文