Element Ui之利用sort-change事件及sortable属性实现Table表格指定列的排序
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
表格的表现形式如下:
注意:该实例介绍的为根据“型号”进行排序,或者根据"创建时间"进行排序!!!
具体步骤如下:
1.创建table,绑定data,绑定列名prop,绑定监听事件sort-change
<el-table :data="tableData" border style="width: 100%" v-loading="loading" @sort-change="changeTableSort">
<el-table-column label="编号" width="80">
<template slot-scope="scope">{{scope.$index + 1}}</template>
</el-table-column>
<el-table-column prop="model" label="型号" width="180" :sortable="'custom'"></el-table-column>
<el-table-column prop="modelName" label="产品名称" width="180"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column prop="createTime" label="创建时间" :sortable="'custom'"></el-table-column>
</el-table>
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);
}
}
如有漏洞,欢迎评论互动指教!!!!!!!!!!!!!
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)