elementUI table 实现表格的多列排序(avue源码中修改)

一、效果图

二、主要实现代码

1、el-table组件

  :default-sort="getDefaultSortParams" //设置排序默认值
  :header-cell-class-name="headerCellClassNameFun" //设置头部样式方法
   @sort-change="sortChange" //排序事件
  

2、data

 sortParams: {},//记录排序参数
 isFirstTableSort: true,//是否首次排序

3、props

 //是否多列排序
    isMultiOrder: {
      type: Boolean,
      default: false,
    },
     headerCellClassName: Function,//头部样式方法
     tableOption.defaultSort:Onject，//默认排序
 

4、处理默认排序computed

 getDefaultSortParams() {
      let sortParams = {};
      if (this.isFirstTableSort) {
        sortParams = this.vaildData(this.tableOption.defaultSort, {
          prop: "createTime",
          order: "descending",
        });
        let name = sortParams.prop;
        this.sortParams = {
          [name]: sortParams.order,
        };
        this.formateOrderData(this.sortParams, false);
        this.isFirstTableSort = false;
      }
      return sortParams;
    },

5、headerCellClassNameFun 方法

 headerCellClassNameFun({ column, rowIndex }) {
      //处理默认值的情况
      if (this.isMultiOrder) {
        if (
          !this.validatenull(column.order) &&
          this.validatenull(column.multiOrder)
        ) {
          column.multiOrder = column.order;
        } else {
          column.order = column.multiOrder;
        }
      }
      if (typeof this.headerCellClassName == "function") {
        return this.headerCellClassName({ column, rowIndex });
      }
    },

6、驼峰转下划线方法

 camecaseToLine(name) {
      return name.replace(/([A-Z])/g, "_$1").toLowerCase();
    },

7、排序回调

   sortChange({ column, prop, order }) {
      if (this.isMultiOrder) {
        column.multiOrder = order;
      } else {
        //清空缓存的数据
        this.sortParams = {};
      }
      this.sortParams[prop] = order;
      //格式化数据
      this.formateOrderData(this.sortParams, true);
    },

8、格式化数据

 formateOrderData(sortParams, isAutoRequest) {
      let val = {
        descending: [],
        ascending: [],
      };
      for (let key in sortParams) {
        let order = sortParams[key];
        if (!this.validatenull(order)) {
          let name = this.camecaseToLine(key);
          val[order].push(name);
        }
      }
      let newValue = {};
      if (val.descending.length != 0) {
        newValue.descs = val.descending.join(",");
      }
      if (val.ascending.length != 0) {
        newValue.ascs = val.ascending.join(",");
      }

      this.$emit("sort-change", newValue, isAutoRequest);
    },

三、使用方法

//排序事件
 sortChange(val, isAutoRequest) {
   sortDefault = val;
    if (isAutoRequest) this.onLoad();
  },
//请求列表事件
 onLoad(params) {
     let values = {...params,...this.query,...sortDefault};
      console.log("values", values);
 }
 

 <avue-crud
        :data="list"
        :option="option"
        :is-multi-order="true"
        :header-cell-class-name="headerCellClassName"
        @search-change="searchChange"
        @sort-change="sortChange"
        @sortable-change="sortableChange"
        @on-load="onLoad"
      ></avue-crud>

 option: {
     name: "sortable",
      defaultSort: { prop: "name", order: "descending" },
      ...
 }