vue中使用element ui中的Table实现对全部数据进行排序_Alisane的博客-CSDN博客

element表格在前端对全部数据进行排序_ydongabc-CSDN博客_element 前端排序

配置一：sortable="custom" 和 @sort-change="sortChange"

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

1.对全部数据进行排序，需要对el-table绑定sort-change监听

<el-table :data='tableData' @sort-change='sortChange'>

2.列中设置属性sortable=“custom”

<el-table-column prop="time" sortable="custom" label="时间"></el-table-column>

单列设置排序 

<el-table-column
        prop="score"
        label="Score"
        width="200"
        :sort-method="scoreOrder"
></el-table-column>


methods(){
    scoreOrder(a, b) {
      // 自定义排序逻辑
      if (a.score < b.score) {
        return -1;
      }
      if (a.score> b.score) {
        return 1;
      }
      // 相同则返回0，表示不变
      return 0;
    },
}

 3.js实现排序功能 

data() {
    return {
      tableData: [], // 数据列表
      currpage: 1, //当前页码
      proptype: "" //存放column.prop的字符串值
    };
sortChange(column) {
      //打印看看参数有哪些？
      console.log("排序", column.prop, column.order);
      this.currpage = 1; // 排序后返回第一页
      this.proptype = column.prop; // 将键名prop赋值给变量proptype
      this.tableData = this.tableData.sort(
        this.SortFun(column.prop, column.order === "descending")
      );
      /* if (column.order === "descending") {
        //大到小
        this.tableData = this.tableData.sort(this.SortFun(column.prop, 1)); //从大到小
      } else if (column.order === "ascending") {
        this.tableData = this.tableData.sort(this.SortFun(column.prop, -1)); //从小到大
      } */
},

SortFun(attr, rev) {
      //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev == undefined) {
        rev = 1;
      } else {
        rev = rev ? 1 : -1;
        //rev = rev>0 ? 1 : -1;
      }
      return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (a < b) {
          return rev * -1;
        }
        if (a > b) {
          return rev * 1;
        }
        return 0;
      };
    },