element ui table 多列排序 清除排序

1. @sort-change事件：监听排序事件，修改排序字段 sortField

2. header-cell-class-name属性：
   官方：表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
   我的理解：排序事件将修改表头类（如添加 ascending 类名），这时将触发每一列调用header-cell-class-name回调，修正该列的属性，其中 column.order 决定表头排序样式

3. 清除排序：官方clearSort() 不适用，因此通过遍历 sortField 的排序字段，并通过sort事件手动触发排序值为 null 的排序，从而实现清除对所有字段的排序

   <el-table
     :data="tableData"
     border
     @sort-change="handleSortChange"
     :header-cell-class-name="handleHeadAddClass"
   >
   </el-table>
   

   const sortField = {};
   const handleSortChange = ({ order, prop }) => {
     // 触发的排序和缓存的排序相同时，取消该字段的排序
     if (!order || sortField[prop] === order) {
       // 排序字段按触发顺序确定排列优先级，需要删除字段确保下次触发时位于最后优先级
       delete sortField[prop];
     } else {
       sortField[prop] = order;
     }
     // 排序参数格式转换
     const orderList = [];
     Object.keys(sortField).forEach((k) => {
       if (sortField[k] !== null) {
         orderList.push({
           orderField: k,
           orderType: sortField[k] === 'ascending' ? 'asc' : 'desc'
         });
       }
     });
     if (!clearSortFlag) {
       emit('query', 'sortQuery', orderList);
     }
   };
   const handleHeadAddClass = ({ column }) => {
     if (sortField[column.property]) {
       column.order = sortField[column.property];
     }
   };
   // 清除排序
   let clearSortFlag = false;
   const clearTableSort = () => {
     clearSortFlag = true;
     Object.keys(sortField).forEach((prop) => {
       tableRef.value.sort(prop, null);
     });
     clearSortFlag = false;
   };
   

参考：https://blog.csdn.net/weixin_40984344/article/details/109653987