element ui 之 el-table 的多列排序，带清除排序

话不多说，直接上代码。 

 1、html

<template>
  <!--el-table 标签中增加 handleSortChange 和 handleHeaderCellClass 方法-->
  <!--el-table-column 标签中增加 sortable='custom'-->
  <el-table
    @sort-change="handleSortChange"
    :header-cell-class-name="handleHeaderCellClass"
  >
    <el-table-column prop="XXX" :label="XXX" sortable="custom">
    </el-table-column>
    <el-table-column prop="XXX" :label="XXX" sortable="custom">
    </el-table-column>
    <el-table-column prop="XXX" :label="XXX" sortable="custom">
    </el-table-column>
  </el-table>
</template>

 

2、JavaScript

<script>
export default {
  data() {
    return {
      // 定义一个数组，用来存放排序字段
      orderArray: [],
    };
  },
  methods: {
    // 清除排序
    resetQuery() {
      // 因为无法通过element ui的api来清除排序样式，所以只能通过原生js来清除
      this.$refs.table.$el.querySelectorAll(".is-sortable").forEach((item) => {
        // 移除table表头中的排序样式descending和ascending
        item.classList.remove("descending");
        item.classList.remove("ascending");
      });
      // 同时要清除排序字段
      this.sortArray = [];
    },

    // 保留所有排序过的箭头样式
    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
      const sortArray = this.sortArray;
      for (let i = 0; i < sortArray.length; i++) {
        if (column.property === sortArray[i].prop) {
          column.order = sortArray[i].order;
        }
      }
    },


    // 收集排序字段，并发送后端
    // 根据点击排序箭头的状态（即order），添加或删除排序字段
    handleSortChange({ column, prop, order }) {
      const sortArray = this.sortArray;
      if (order) {
        // 参与排序
        let flagIsHave = false;
        for (let i = 0; i < sortArray.length; i++) {
          if (sortArray[i].prop === prop) {
            sortArray[i].order = order;
            flagIsHave = true;
          }
        }
        if (!flagIsHave) {
          sortArray.push({
            prop: prop,
            order: order,
          });
        }
      } else {
        // 不参与排序
        let orderIndex = 0;
        for (let i = 0; i < sortArray.length; i++) {
          if (sortArray[i].prop === prop) {
            orderIndex = i;
          }
        }
        sortArray.splice(orderIndex, 1);
      }
      // console.log(sortArray, "sortArray000");

      // 转成json字符串发送到后端
      this.queryParams.sortJson = JSON.stringify(sortArray);
      this.handleQuery();
    },
  },
};
</script>

 发送到后端的json字符串样式，ascending是升序，descending是降序，如下：

sortJson = [
    {
        "prop": "wifiLinkCount",
        "order": "ascending"
    },
    {
        "prop": "activeLinkCount",
        "order": "ascending"
    },
    {
        "prop": "memPercent",
        "order": "ascending"
    },
    {
        "prop": "cpuPercent",
        "order": "descending"
    },
    {
    	"prop": "modelTemp",
        "order": "ascending"
    },
    {
        "prop": "onlineTimesStr",
        "order": "ascending"
    },
    {
        "prop": "offlineTime",
        "order": "descending"
    }
]

总结

每次点击排序箭头时，都会触发 handleSortChange 事件，该事件方法内会收集或排除排序字段，然后根据收集的排序字段向后端请求数据。

在触发执行 handleSortChange 完事件后，会执行 handleHeaderCellClass 方法，该方法的作用是保留所有字段排序状态，element ui自带的表格排序是没有这个功能的。