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排序');
      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.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.