element 实现多列表格 支持默认排序

第一步 表格添加配置

<el-table
@sort-change="onSortChange"
:header-cell-class-name="handleHeaderClass"
:header-cell-style="handleTheadStyle">

第二步 设置你和后端约定好的 自定义custom 排序传参字段

此处我和后端约定好是 当element 组件是 descending ，就转换为  DESC
可自定义或者无需声明变量
const SortMap = {
  descending: "DESC",
  ascending: "ASC",
};
const ReversalSortMap = {
  DESC: "descending",
  ASC: "ascending",
};

第三步 data设置一个 存储多列排序变量

data(){
 return{ 
  //缓存排序规则
  ordersList: []
  // { prop :"", order:"DESC"} 此处是排序字段的结构。不同需求设计因人而异

第四步 过滤掉order为空 null 的情况。因为element 排序的值可以是 descending ascending 或 null。将这个作为排序参数传给后端，避免 null 值传递

computed:{
  orderListParams() {
    return this.ordersList.filter(item => item.order);
 }

第四步 假如表格需要支持第一次加载数据有 默认排序 可在配置上添加 defaultSortOrder

//在 created 上进行初始化
created() {
   this.ordersList = this.tableConfig
     .filter(item => item.defaultSortOrder)
     .map(item => ({
       prop: item.eleAttr.prop,
       order: item.defaultSortOrder
    }))
  }

此处tableconfig为 (每个人的表格列配置结构和 命名不一样，此处为了方便演示)
 [{
   defaultSortOrder:"ASC",
   eleAttr: {
     label: "日期",
     prop: "date",
     sortable: "custom", (可以为 true 或 custom)
  }
 }
]

对应 
 <el-table-column
    prop="date"
    label="日期"
   :sortable="eleAttr.sortable"
 >
 </el-table-column>

第五步 添加处理方法

// 设置列的排序为我们自定义的排序 （无法支持默认排序，故而采用 handleTheadStyle）
handleHeaderClass({ column }) {
   column.order = column.multiOrder;
},


// 设置列的排序为我们自定义的排序  (多列的情况下使用)
handleTheadStyle({ row, column, rowIndex, columnIndex }) {
//该回调方法初始化的时候每一列都会调用，为提升性能， 增加下边两个if 判断
 if (this.orderListParams && this.orderListParams.length) {
    const single = this.orderListParams.find(item => item.prop === column.property)
    if (single) {
      //由于是和后端自定义了字段，和 eltable不一样，所以要 ReversalSortMap 反转回来
      column.order = ReversalSortMap[single.order]
    }
  }
 }

   onSortChange({ column, prop, order }) {
      column.multiOrder = order;
      if (prop) {
        const result = this.ordersList.find(item => item.prop === prop);
        const orderValue = SortMap[order]
        if (result) {
          result.order = orderValue;
        } else {
          this.ordersList.push({
            prop,
            order: orderValue,
          });
        }
      }
  //此方法 表格数据查询接口
      this.getTableData();
    }

//下一页的时候
   onPageChange(pageConfig) {
      const { page, pageSize } = pageConfig;
      // do something.....
      this.getTableData();
    }

 // 获取列表数据
    getTableData() {
    let submitData = {
       page: {
         page,
         pageSize,
         // 根据服务端约定传递
         sort: this.orderListParams,
      }
   }
  //api
    xxxx(submitData).then(xxxx)
}

其他参考文献
https://blog.csdn.net/qq_37485170/article/details/134138801

https://blog.csdn.net/qq_45927262/article/details/137629880#:~:text=1%EF%BC%9A%E5%9C%A8%20el%20-%20table%20%E4%B8%8A%E5%8A%A0%E4%B8%8A%E8%BF%99%E4%B8%AA%E6%96%B9%E6%B3%95%40sort-change%3D%E2%80%9CsortChange%E2%80%9D,2%EF%BC%9A%E5%9C%A8%E6%83%B3%E8%A6%81%20%E6%8E%92%E5%BA%8F%20%E7%9A%84%E8%A1%A8%E5%A4%B4%E4%B8%8A%E5%8A%A0%E4%B8%8A%20sortable%20%3D%E2%80%9Ccustom%E2%80%9D%203%EF%BC%9A%E5%A4%9A%E7%9C%8B%E6%96%87%E6%A1%A3%E3%80%82