前端使用elemnt-ui自定义排序

原创
Element Ui之利用sort-change事件及sortable属性实现Table表格指定列的排序
2019-08-29 17:00:58 杨丫丫 阅读数 707更多
分类专栏： Element Ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangfan_357/article/details/100140641
表格的表现形式如下：
注意：该实例介绍的为根据“型号”进行排序，或者根据"创建时间"进行排序！！！

具体步骤如下：
1.创建table，绑定data，绑定列名prop，绑定监听事件sort-change

{{scope.$index + 1}}






2.初始化列表数据tableData及加载状态loading

data() {
return {
tableData: [
{
model:2,
modelName:“水浸”,
description:“ccc”,
createTime:“2019-07-17T06:55:14.000+0000”
},
{
model:3442,
modelName:“3443”,
description:“kkkk”,
createTime:“2019-07-17T06:54:49.000+0000”
},
{
model:96478,
modelName:“85745”,
description:“857856856”,
createTime:“2019-08-19T07:15:15.000+0000”
}
],
loading: true
};
},
3.添加初始化加载列表事件getDeviceTypes()、实现监听事件changeTableSort()

注意：当进行排序的字段为时间格式时，要记得将其转换为时间戳的格式，才能进行大小比较哦

mounted() {
this.getDeviceTypes();
},
methods: {
//初始化加载列表
getDeviceTypes() {
this.loading = true;

    //将“创建时间”转换为所需的时间格式
    this.tableData.map(item => {
        item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
    });

    this.loading = false;
},

//选择指定列进行排序
changeTableSort(column){
    console.log(column);

    //获取字段名称和排序类型
    var fieldName = column.prop;
    var sortingType = column.order;

    //如果字段名称为“创建时间”，将“创建时间”转换为时间戳，才能进行大小比较
    if(fieldName=="createTime"){
       this.tableData.map(item => {
            item.createTime = this.$moment(item.createTime).valueOf();
       });
    }
        
        
    //按照降序排序
    if(sortingType == "descending"){
        this.tableData = this.tableData.sort((a, b) => b[fieldName] - a[fieldName]);
    }
    //按照升序排序
    else{
        this.tableData = this.tableData.sort((a, b) => a[fieldName] - b[fieldName]);
    }

    //如果字段名称为“创建时间”，将时间戳格式的“创建时间”再转换为时间格式
    if(fieldName=="createTime"){
        this.tableData.map(item => {
            item.createTime = this.$moment(item.createTime).format(
                 "YYYY-MM-DD HH:mm:ss"
            );
        });
    }
    
    console.log(this.tableData);
}

}