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>