el-table多列同时排序且样式保留(多用于后台排序)

场景：

上图中可以看到多个箭头都是选中效果

描述：

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>