一、清除el-table 排序高亮状态
需求背景：排序后，切换日期或其他条件重新渲染表格数据，这时候需要去除排序箭头高亮样式。
<el-table ref="table" highlight-current-row style="width: 100%;">
<el-table-column sortable ref="applyTimeRef" prop="applyTime" label="申请时间" > </el-table-column>
</el-table>
created() {
this.clearSortHighlight()
},
methods: {
clearSortHighlight() {
if (this.$refs.table) {
this.$refs.table.clearSort();
}
this.$refs.applyTimeRef.columnConfig.order = '';
}
}
注：不管是el-table自带的排序还是远程排序，使用官方文档中的clearSort方法都无法去除排序的高亮效果。只能通过把el-table-column组件中的columnConfig的order字段设置为空才能清除高亮。
二、将排序的顺序状态保留，显示高亮
1、排序的列设置 sortable=‘custom’，表示该列开启排序功能，并且需要后端排序
2、Table 上监听sort-change事件，在事件回调中获取当前排序的字段名和排序顺序，根据实际业务情况编写逻辑并向接口请求排序后的表格数据。
3、在 sort-change 事件的 “sortChange” 处理函数中，需要记录当前列是哪一列，排序的顺序。
4、控制排序的小图标高亮，给table添加:header-cell-style方法。
<el-table :data="tableList" :header-cell-style="getRowClass" :sort-change='sortChange' style="width: 100%">
<el-table-column prop="applyTime" sortable='custom' label="申请时间"></el-table-column>
</el-table>
data() {
return {
sortType: 'descending',
};
},
methods: {
sortChange({prop,order}) {
// prop为排序列的名称
// order为排序的顺序，也就是正序，还是倒序，还是null
this.sortType = val.order;
// 根据实际业务情况编写逻辑并向接口请求排序后的表格数据
this.getList()
}，
getRowClass({ row, column, rowIndex, columnIndex }) {
// 判断 列的名称 是否与 业务需要使用的字段 是否一致
if(column.property === 'applyTime') {
// 如果一致，将排序顺序赋值，或者从sortChange获取的动态数据填在这里
column.order = this.sortType
} else {
// 如果不一致，就清空该列的排序信息
column.order = ''
}
// 下面是表头的样式，忽略
if (rowIndex === 0) {
return 'background:#FAFAFA;color: #606266;'
} else {
return ''
}
}
}
三、初始化修改默认头部排序字段高亮
通过上面的方法 二 的方法实现默然高亮，会有切换其他排序字段，默认添加的字段不变化的问题。以下是个人的临时新方案，如果大家有更好的可以互相交流：
在引用的table文件中调用
mounted () {
// NOTO: 这里需要添加定时延时，不然界面无效果
setTimeout( () => {
this.$nextTick(() => {
// sortName：需要默认排序的字段名，eg:applyTime sortType：排序的类型，升序还是降序，eg: 'ascending'
this.$refs.tables.sort(sortName, sortType)
})
}, 5000)
},
效果图：
22.jpg
