element-ui 通过点击表单标题实现自定义排序

由于需求需要，不让使用饿了吗自带的排序，要实现自定义点击标题即可排序。

最终效果图

实现思路

实现思路，通过点击标题获取该列的字段，然后数组按照该字段进行排序。

用到的事件

header-click	当某一列的表头被点击时会触发该事件	column, event

降序算法

// 点击降序
         desc(column, event) {
             console.log(column)
             let option = this.whichOption(column.label);
             this.person.sort(this.descFun(option));
         },
         // 降序算法，根据字段值降序
         descFun(obj) {
             return (a, b) => {
                 let val1 = a[obj];
                 let val2 = b[obj];
                 return val2 - val1;
             };
         },
         // 根据标签返回字段值
         whichOption(label) {
             let title = {
                 日S单: "num",
                 日实际销售额: "zsmoney",
                 日实际订单数: "zsnum",
                 日本金: "money",
                 预计金额: "yjMoney",
                 已评数: "dayNum",
                 预计刷单: "yjNum"
             };
             return title[label];
         }

 
如果需要实现以进到页面就按某列排序的话，只需将该列在获取数据后执行一次即可

this.person.sort(this.descFun("num"));