element多列排序

 <div class="table">
      <el-table
        :data="tableData"
        borderstyle="width: 100%"
        border
        stripe
        @sort-change="sortChange"
        ref="table"
        :height="tableHeight"
        :header-cell-style="handleTheadStyle"
      >

<el-table-column label="Ledger Amt" prop="amountLedger" min-width="100" align="center" sortable="amountLedger">
          <template slot-scope="scope">
            <span>{{scope.row.amountLedger | thousands}}</span>
          </template>
</el-table-column>

  props: {
    mutilSort: {
        default: true
    },
  },
  data() {
    return {
      activeThead: {} //保存所选择的表头
    }
  }

 reset() {
      this.searchForm = {};
      this.sortList = [];
      this.$refs.table.clearSort();
      for(let key in this.activeThead){
        if(this.activeThead[key]){
          this.activeThead[key].column.order = '';
          this.activeThead[key].order = '';
          this.activeThead
        }
      }
      this.getTableData();
    },
    sortChange(column) {
      let sidx = column.prop;
      let order = column.order;
      if(sidx == 'valueDate'){
        sidx = 'valueDatetime'
      }
      if(column.order == 'descending'){
        order = 'desc'
      }else if(column.order == 'ascending'){
        order = 'asc'
      }else {
        order = null
      }
      let sort = {[sidx]:order}
      this.sortList.push(sort)
      this.getTableData();
      if (!this.mutilSort) return;
      if (column.order) {
          this.activeThead[column.prop] = {
            column,
            order:column.order
          }
      } else if (!column.order) {
          this.activeThead[column.prop] = "";
      }  
    },
    handleTheadStyle({ row, column, rowIndex, columnIndex}) {
      if (!this.mutilSort) return;
      if (this.activeThead[column.property]) {
          column.order = this.activeThead[column.property].order;
      }
    },