一敦锌、清除el-table 排序高亮狀態(tài)
需求背景：排序后楔脯，切換日期或其他條件重新渲染表格數(shù)據(jù)喇肋，這時候需要去除排序箭頭高亮樣式。
<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自帶的排序還是遠(yuǎn)程排序档桃，使用官方文檔中的clearSort方法都無法去除排序的高亮效果枪孩。只能通過把el-table-column組件中的columnConfig的order字段設(shè)置為空才能清除高亮。
二藻肄、將排序的順序狀態(tài)保留蔑舞，顯示高亮
1、排序的列設(shè)置 sortable=‘custom’嘹屯，表示該列開啟排序功能攻询，并且需要后端排序
2、Table 上監(jiān)聽sort-change事件州弟，在事件回調(diào)中獲取當(dāng)前排序的字段名和排序順序钧栖，根據(jù)實際業(yè)務(wù)情況編寫邏輯并向接口請求排序后的表格數(shù)據(jù)。
3婆翔、在 sort-change 事件的 “sortChange” 處理函數(shù)中拯杠，需要記錄當(dāng)前列是哪一列，排序的順序啃奴。
4潭陪、控制排序的小圖標(biāo)高亮，給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;
// 根據(jù)實際業(yè)務(wù)情況編寫邏輯并向接口請求排序后的表格數(shù)據(jù)
this.getList()
}黎炉，
getRowClass({ row, column, rowIndex, columnIndex }) {
// 判斷 列的名稱 是否與 業(yè)務(wù)需要使用的字段 是否一致
if(column.property === 'applyTime') {
// 如果一致，將排序順序賦值醋拧，或者從sortChange獲取的動態(tài)數(shù)據(jù)填在這里
column.order = this.sortType
} else {
// 如果不一致慷嗜，就清空該列的排序信息
column.order = ''
}
// 下面是表頭的樣式宿百，忽略
if (rowIndex === 0) {
return 'background:#FAFAFA;color: #606266;'
} else {
return ''
}
}
}
三、初始化修改默認(rèn)頭部排序字段高亮
通過上面的方法 二 的方法實現(xiàn)默然高亮洪添，會有切換其他排序字段，默認(rèn)添加的字段不變化的問題雀费。以下是個人的臨時新方案干奢，如果大家有更好的可以互相交流：
在引用的table文件中調(diào)用
mounted () {
// NOTO: 這里需要添加定時延時，不然界面無效果
setTimeout( () => {
this.$nextTick(() => {
// sortName：需要默認(rèn)排序的字段名盏袄，eg:applyTime sortType：排序的類型忿峻，升序還是降序，eg: 'ascending'
this.$refs.tables.sort(sortName, sortType)
})
}, 5000)
},
效果圖：
22.jpg
