element表格table前端对全部数据进行排序

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

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

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>

 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;
      };
    },