element-ui table 多列组合排序

element-ui table 配合后端实现多列组合排序。
思路：
1.监听sort-change事件，在该事件中缓存和修正当前的排序规则。并根据保存的排序规则调接口刷新表格数据。
2.监听header-cell-class-name事件，在该事件中修正表头排序图标的样式。保证图标的样式逻辑和缓存的排序规则一致

<el-table stripe
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-cell-class-name="handleHeadAddClass"
      @sort-change='handleSortChange'
    >
	<el-table-column label="参数值"  align="center" sortable='custom' prop="paramValue"/>
	<el-table-column label="排序" align="center" sortable='custom' prop="orderId"/>
</el-table>

data(){
	return {
		sortField: {},
	}
}
--------------------------------------
handleSortChange({order, prop}){
    //触发的排序和缓存的排序相同时，取消该字段的排序
	if(!order || this.sortField[prop] === order){
	 	this.sortField[prop] = null;
	}else{
	 	this.sortField[prop] = order;
	}
	console.log(this.sortField)
	// 在 handleFilter 中传入 this.sortField的值调接口刷新表格中的值
	this.handleFilter();
},
handleHeadAddClass({column}){
	if(this.sortField[column.property]){
		column.order = this.sortField[column.property];
	}
},

原文链接：https://blog.csdn.net/weixin_40984344/article/details/109653987