element ui table 组合排序

// HTML
<el-table
      ref="manageSubTable"
      v-loading="loading"
      :row-class-name="tableRowClassName"
      :data="tableData"
      style="width: 100%"
      stripe
      tooltip-effect="light"
      :default-sort="{ prop: 'caseBeginTime', order: 'descending' }"
      :header-cell-class-name="handleHeadAddClass"  // 排序状态（箭头样式）
      @row-click="handleRowClick"
      @row-dblclick="handleEdit"
      @sort-change="handleSort" // 点击排序
    >

注意绑定:header-cell-class-name="handleHeadAddClass" // 表头排序字段的排序状态（箭头样式）。

js部分：

    // 排序状态
    handleHeadAddClass({ column }) {
      if (this.sortField[column.property]) {
        column.order = this.sortField[column.property];
      }
    },
    
    // 点击触发排序
    handleSort({ prop, order }) {
      // 触发的排序和缓存的排序相同时、或者当前排序规则（order）为null时‘取反’，否则按当前规则排序
      if (!order || this.sortField[prop] === order) {
        this.sortField[prop]=this.sortField[prop] === 'ascending'?'descending':'ascending'
      } else {
        this.sortField[prop] = order;
      }
    }

vue data里默认绑定的排序规则：

// vue data里绑定的排序状态
sortField: {
        caseAskCount: "descending",
        caseBeginTime: "descending"
      },