element表格自定义排序功能

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

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

sort-change绑定方法具有参数：column，这是一个对象：

column: { 
  prop: 'xxxx', // el-table-column中的prop
  order: 'xxxx', // 'ascending' or 'descending'
}

sort_change (column){
      console.log(column.prop); //当前列需要排序的数据
      console.log(column.order);//排序规则：descending降序、ascending升序
}

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

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

3.js实现排序功能

<script>
export default {
  data() {
    return {
      tableData: [], // 数据列表
      currpage: 1, //当前页码
      proptype: "" //存放column.prop的字符串值
    };
  },
  methods: {
    //排序功能
    sort_change(column) {
      this.currpage = 1; // 排序后返回第一页
      if (column.prop === "time") {
        this.proptype = column.prop; // 将键名prop赋值给变量proptype
        if (column.order === "descending") {
          this.tableData.sort(this.my_desc_sort);
        } else if (column.order === "ascending") {
          this.tableData.sort(this.my_asc_sort);
        }
      } else if (column.prop === "id") {
        this.proptype = column.prop;
        // ...
      }
    },
    //若采用相同排序方法可简写：
    sort_change2(column) {
      this.currpage = 1; // 排序后返回第一页
      this.proptype = column.prop; // 将键名prop赋值给变量proptype
      if (column.order === "descending") {
        this.tableData.sort(this.my_desc_sort);
      } else if (column.order === "ascending") {
        this.tableData.sort(this.my_asc_sort);
      }
    },
    //排序方法
    my_desc_sort(a, b) {
      return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
    },
    my_asc_sort(a, b) {
      return a[this.proptype] - b[this.proptype];
    }
  }
};
</script>