element-ui table 多列表头组合排序

element-ui table 多列表头组合排序

由于element-ui table 默认只能单个排序，所以我们可以监听表头样式事件，将鼠标点击排序后缓存的排序规则赋值给表头：
1.监听sort-change事件，在该事件中缓存排序规则
2.监听header-cell-class-name事件，在该事件中修正表头排序图标的样式。保证图标的样式和缓存的数据一致

<el-table
  :data="list"
  :header-cell-class-name="handleHeadAddClass"
  @sort-change='handleSortChange'
 >
	<el-table-column label="参数值"  align="center" sortable='custom' prop="num"/>
	<el-table-column label="排序" align="center" sortable='custom' prop="order"/>
</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) // {num: "descending"，order: "ascending"}
	// 在下面可以实现自己的业务逻辑
},
handleHeadAddClass({column}){
	if(this.sortField[column.property]){
		column.order = this.sortField[column.property];
	}
},