关于element-ui:eltable多列同时排序且样式保留多用于后台排序

场景：

上图中能够看到多个箭头都是选中成果

形容：

element-ui 的 el-table 仅才反对 单列（一个字段）进行排序，想要反对多列排序，首先要定义一个数组，用于寄存所有排序的字段及其程序，
设置列 sortable=“custom”，联合 sort-change 事件，在点击排序箭头时进行排序操作

实现：

话不多说间接上代码，大家本人能够批改成合乎本人的业务：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop:'date', order:'descending'}"
     @sort-change="handleSortChange"
     :header-cell-class-name="handleHeaderCellClass"
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        orderArray: []}
    },
    methods: {
        // 增加排序办法（可把多个字段独特退出排序）handleHeaderCellClass({row, column, rowIndex, columnIndex}) {this.orderArray.forEach((element) => {if (column.property === element.prop) {column.order = element.order;}
      });
    },
    // 点击排序箭头
    handleSortChange({column, prop, order}) {if (order) {
        // 参加排序
        let flagIsHave = false;
        this.orderArray.forEach((element) => {if (element.prop === prop) {
            element.order = order;
            flagIsHave = true;
          }
        });
        if (!flagIsHave) {
          this.orderArray.push({
            prop: prop,
            order: order,
          });
        }
      } else {
        // 不参加排序
        this.orderArray = this.orderArray.filter((element) => {return element.prop !== prop});
      }
      // 调后端接口进行排序操作, this.orderArray 就是最终排序后的汇合
      console.log(this.orderArray);
    },
    }
  }
</script>