当表格排序列的数据出现空数据（null）的时候，组件自带的排序功能就不正常了，出现的问题如图：
排序生效，但不整齐，中间有空行。
思路一：重新排一个新数组：遍历表格data，使其含空的数据堆在一块，非空的数据放在一块，新数组给表格data重新赋值；
思路二：作为思路一的扩展，不仅支持字符串，也支持数字，通过 sort 方法比较排序
【以下方法为思路二】
1、html部分：
1）default-sort 为默认排序；
2）sort-change方法自带三个参数，分别代表意义是：
column：当前列
prop：当前列需要排序的数据
order：排序的规则（升序、降序和默认[默认就是没排序]）
3）将sortable设置为custom（需要自主排序的列加上）
2、data部分只看标红色的就可以了：
oldData 每次请求数据后记录到oldData，用于点击取消排序后【恢复原始排序】
3、methods部分：
// 刷新之后记录原始数据
afterCrudRefresh() {
// 不能直接用=号赋值，避免this.oldData 与 this.crud.data 指向同一个地址
if (this.crud.data.length > 0) {
this.oldData.length = 0
this.crud.data.forEach(item => {
this.oldData.push(item) })
}
// 点击下一页或者翻页后清除排序
if (this.$refs.table) this.$refs.table.clearSort()
},
// 自定义排序
sortChange(column) {
const prop = column.prop
if (prop) {
this.proptype = prop
if (column.order === 'ascending') {
this.crud.data = this.crud.data.sort(this.ascSortFun)
} else if (column.order === 'descending') {
this.crud.data = this.crud.data.sort(this.desSortFun)
} else {
// 再点击向上【向下】恢复原始排序
this.crud.data.length = 0
this.oldData.forEach(item => {
this.crud.data.push(item) })
}
}
},
// 升序排列方法
ascSortFun(a, b) {
if (!this.isNumber(a[this.proptype])) {
const aLength = a[this.proptype] === null ? 0 : a[this.proptype].length
const bLength = b[this.proptype] === null ? 0 : b[this.proptype].length
return aLength - bLength
} else {
return a[this.proptype] - b[this.proptype]
}
},
// 降序排列方法
desSortFun(a, b) {
if (!this.isNumber(a[this.proptype])) {
const bLength = b[this.proptype] === null ? 0 : b[this.proptype].length
const aLength = a[this.proptype] === null ? 0 : a[this.proptype].length
return bLength - aLength
} else {
return b[this.proptype] - a[this.proptype]
}
},
// 校验只要是数字（包含正负整数，0以及正负浮点数）就返回true
isNumber(val) {
var regPos = /^\d+(\.\d+)?$/ // 非负浮点数
var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数
if (regPos.test(val) || regNeg.test(val)) {
return true
} else {
return false
}
}
排序后的结果：
小结（扩展）：这里使用的是 element-ui table提供的 sort-change 事件做的前端的数据重组排序，其实，排序实现也可以放至后端接口实现，通过getList()方法把参数传递到后端，然后后端实现排序功能。
---------------------------------------- 前端排序至此已结束，以下为后端排序 --------------------------------------------
data() {
return {
loading: false,
listData: [],
addVisible: false,
currentObj: {
U: {
}, UAccount: {
} },
queryData: {
UserName: "",
CustomerCode: "",
CustomerName: "",
role: 0,
p_Role: "",
prop : "",
order : "",
currentPage: 1,
pageSize: 10
},
EUserP_Role: [],
p_Role: {
},
ids: []
};
},
methods: {
sortChange(column,prop,order){
if(column.prop == null || column.order == null){
this.queryData.prop = "";
this.queryData.order = "";
}else{
this.queryData.prop = column.prop;
this.queryData.order = column.order;
}
this.getList();
}，
getList() {
this.loading = true;
this.$API.User.List(this.queryData).then(res => {
this.loading = false;
this.listData = res;
this.currentPage = 1;
this.prop = column.prop;
this.order = column.order;
});
}
分享到此，希望帮助到您。