element el-table多列多字段同时排序后端返回数据（支持多个字段同时进行排序）

element el-table多列多字段同时排序后端返回数据（支持多个字段同时进行排序）

场景

描述

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

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
      @sort-change="handleTableSort"
      @selection-change="selectHandle"
      @row-click="rowClickHandle"
     :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 弄'
        }],
      realParams: {
        ordersList: [],
      },
      }
    },
    methods: {
	    // 设置列的排序为我们自定义的排序
	    handleHeaderClass({ column }) {
	      column.order = column.multiOrder;
	    },
	    // 点击排序箭头 
	    handleOrderChange(orderColumn, orderState) {
	      if (!orderState) {
	        this.realParams.ordersList = this.realParams.ordersList.filter(
	          (item) => {
	            return item.property !== orderColumn;
	          }
	        );
	      } else {
	        let result = this.realParams.ordersList.find(
	          (e) => e.property === orderColumn
	        );
	        if (result) {
	          result.direction = orderState == "descending" ? "DESC" : "ASC";
	        } else {
	          this.realParams.ordersList.push({
	            property: orderColumn,
	            direction: orderState == "descending" ? "DESC" : "ASC",
	          });
	        }
	      }
	    },
	    // 列表排序
	    handleTableSort({ column }) {
	      // 有些列不需要排序，提前返回
	      if (column.sortable !== "custom") {
	        return;
	      }
	      if (!column.multiOrder) {
	        column.multiOrder = "descending";
	      } else if (column.multiOrder === "descending") {
	        column.multiOrder = "ascending";
	      } else {
	        column.multiOrder = "";
	      }
	      this.handleOrderChange(column.property, column.multiOrder);
	    },
	    selectHandle(selectRows) {
	      let selectIds = [];
	      let delDataLabelIdAndName = [];
	      let delDataLabelIdAndNameIds = [];
	      selectRows.forEach((item) => {
	        // 修改所属分类（选择多个进行删除）对分类集合去重
	        item.dataLabelIdAndName.forEach((labelItem) => {
	          if (!delDataLabelIdAndNameIds.includes(labelItem.labelId)) {
	            delDataLabelIdAndNameIds.push(labelItem.labelId);
	            delDataLabelIdAndName.push({
	              label: labelItem.labelName,
	              value: labelItem.labelId,
	            });
	          }
	        });
	        selectIds.push(item.id);
	      });
	      this.$emit("selectHandle", selectIds, delDataLabelIdAndName);
	    },
    }
  }
</script>

<style lang="less" scoped>
/deep/table {
  width: 100% !important;
}
/deep/.el-table__empty-block {
  width: 100% !important;
}
</style>