When the data in the table sorting column appears empty data (null), the sorting function of the component is abnormal. The problem is shown in the figure: the
sorting is effective, but it is not neat, and there are blank rows in the middle.
Idea one: rearrange a new array: traverse the table data, stack the empty data together, put the non-empty data together, and re-assign the table data with the new array;
idea two: as an extension of idea one, it not only supports String, also supports numbers, compare and sort through the sort method
[The following method is the second idea]
1. html part:
1) default-sort is the default sorting;
2) the sort-change method comes with three parameters, which respectively represent the meaning:
column: the current column
prop: the data to be sorted in the current column
order: the sorting rule (ascending order) , Descending order and default [default is no sorting])
3) Set sortable to custom (add columns that need to be sorted independently)
2. In the data part, just look at the red one:
oldData records to oldData after each request for data, used to click to cancel the sort after [restore the original sort]
3. Methods part:
// 刷新之后记录原始数据
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
}
}
Sorted results:
Summary (extension): The front-end data reorganization and sorting done by the sort-change event provided by element-ui table is used here. In fact, the sorting implementation can also be implemented in the back-end interface, and the parameters are passed to the back through the getList() method. End, and then the back end implements the sorting function.
---------------------------------------- The front-end sorting is now over, the following is the back-end Sorting--------------------------------------------
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;
});
}
Share here, hope to help you.