Eelement Table sorts multiple columns

Element-ui table with the back end to achieve multi-column combination sort.

Ideas:

1. Listening to thesort-changeEvent in which the current collation is cached and corrected. And refresh the table data according to the saved sorting rules.
2. Listening to theheader-cell-class-nameEvent in which the style of the table header sort icon is modified. Ensure that the style logic of the icon is consistent with the collation rules of the cache.

<el-table
  :data="pagination.data"
  ref="multipleTable"
  class="orioc-table center-table"
  row-key="id"
  v-loading="listLoading"
  @sort-change='handleSortChange'
  :header-cell-class-name="handleHeadAddClass"
  stripe border>
    <el-table-column
      prop="organizationName"
      label="Name of Unit"
      min-width="130" sortable
    ></el-table-column>
    
    <el-table-column
      prop="elevatorCount"
      label="Units"
      width="100"
      align="center" sortable
    ></el-table-column>
</el-table>
Copy the code

<script>
  export default {
    data() {
      return {
        sortField: {},
        orderBys: []}; },methods: {
      handleSortChange({ order, prop }) {
        // Unsort the field if the triggered sort is the same as the cached sort
        if(! order ||this.sortField[prop] === order) {
          this.sortField[prop] = null
        } else {
          this.sortField[prop] = order
        }
        // console.log(this.sortField)
        this.orderBys = []
        let direction = ' '
        for (const i in this.sortField) {
          if (this.sortField[i] == 'ascending') {
            direction = 'ASC'
          } else if (this.sortField[i] == 'descending') {
            direction = 'DESC'
          }
        this.orderBys.push({
            "column": i,
            "direction": direction
          })
        }
        // console.log(' this.orderBys', this.orderBys)
        this.onSearch() // Invoke the back-end query interface
      },
      
      handleHeadAddClass({ column }) {
        if (this.sortField[column.property]) {
          column.order = this.sortField[column.property]
        }
      },
    }
  };
</script>
Copy the code