element-ui table sortable排序 掉后端接口方式

实例:

官方解释:如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

1.table上要加 @sort-change="sortChange"

2.每一列需要加上  sortable="custom" 不然不生效

3.定义排序字段,后端定义的

4.直接上方法

// 排序
sortChange(column) {
      console.log(column, 'column排序--------');
       if (column.order === null) {
        this.currentSort = {
          connStateOrder: '',
          socOrder: '',
          batteryStateOrder: '',
          currentAuthOrder: '',
          batteryStrandNumOrder: '',
          highestMonomerVoltageOrder: '',
          minimumMonomerVoltageOrder: '',
          orderType: ''
        };
      this.getList();
      return; // 结束方法，不再执行后续逻辑
  }
      for (const key in this.currentSort) {
        if (key.endsWith('Order') && key !== `${column.prop}Order`) {
          this.currentSort[key] = '';
        }
      }
      this.currentSort.orderType = column.order === 'ascending' ? 'asc' : 'desc';
      this.currentSort[`${column.prop}Order`] = column.prop;
      this.getList();
    },

5.最后调用接口list

async getList() {
      try {
        let params = {
          ...this.bindParams, 
          ...this.currentSort
        };
        this.$refs.tree.setCurrentKey(null);
        Object.keys(params).forEach(key => {
          if (params[key] === '') delete params[key];
        });
        this.$refs.tree.setCurrentKey(null);
        const res = await deviceRealList2(this.current, this.size, params)
        console.log(res, '新列表数据');
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      } catch (e) {
        console.log(e);
      }
    },

6.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.

7.如果是搜索,想要清空高亮标识. 执行:this.$refs.realDevice.clearSort();​​​​​​​