el-table自带sortable属性可以实现纯前端排序【当然表格有分页的话还是得靠后端排序】。然后在开发的过程中发现一个问题,就是当表格里要排序的某一列字段某些行是空值null或者后端没返回该字段为undefined【很常见的场景】,点击表头排序就会发现结果根本不准确。
那么解决办法就是自定义sortChange函数,自己实现对当前表格data进行排序。
1、首先在el-table标签上加上
@sort-change="sortChange"
2、在要排序的列上加上sortable="custom"
3、实现sortChange函数:
sortChange(column) {
if (column.order !== null && column.prop) {
let data1 = [];
let data2 = [];
for (let i = 0; i < this.list.length; i++) {
let temp = null;
temp = this.list[i][column.prop];
if (temp === null || typeof temp == "undefined") {
data2.push(this.list[i]);
} else {
data1.push(this.list[i]);
}
}
if (column.order === "ascending") {
data1 = data1.sort(this.compare(column.prop, "ascending"));
} else {
data1 = data1.sort(this.compare(column.prop, "descending"));
}
this.$nextTick(() => {
this.list = data1.concat(data2);
});
}
if (column.order === null) {
this.list = this.tabData; // tabData存放的是list副本,不排序时恢复到初始状态
}
},
compare(property, type, prop) {
return function(obj1, obj2) {
if (type === "ascending") {
return obj1[property] - obj2[property];
} else {
return obj2[property] - obj1[property];
}
};
},
思路很简单,就是用两个数组临时存放列表数据,当该数据为null或者不存在时,放到数组data2中;有数据的就放到data1里,然后根据是升序还是降序对有数据的一边进行排序,最后将两个数组连接起来得到结果。