一:先看效果
二:步骤
1、对el-table绑定sort-change事件
@sort-change="sort_change"
如图:
2、需要排序列设置sortable=“custom”属性
<el-table-column prop="operationAvgTime" label="姓名" align="center" sortable="coumnt"></el-table-column>
如图:
3、data中存数据
// 表格数据
data() {
return {
tableData: [],
//存放column.prop的字符串值
proptype: "",
// 排序后为第一页
pagesNum: 1
}
}
4、js实现代码
methods: {
// 排序方法
sort_change(column) {
// console.log(column.prop); //当前列需要排序的数据
// console.log(column.order); //排序规则:descending降序、ascending升序
this.pagesNum = 1; // 排序后返回第一页
if (column.prop === "operationAvgTime") { // 表格每一列对应的字段,必须一一对应
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 === "numberScenarios") { // 第二列排序 表格每一列对应的字段,必须一一对应
this.proptype = column.prop;
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];
},
my_asc_sort(a, b) {
return a[this.proptype] - b[this.proptype];
}
}