问题: 当我table数据某些字段为空或null时,我想排序时把这些数据都放到最下面,把有值的部分排序在前面,之前element UI遇到过这样问题,是在 sortChange 里面把源数据先按是否有值进行分类的 赋值给 tableData,而这里是虚拟列表,有不同点
sortChange({ column, prop, order }) {
// prop:排序的字段、order:升序(ascending)、降序(descending)、取消排序(null)
const copyTableDate = deepClone(this.tableData)
let reserveData = [] // 过滤后保留的数据
const filterData = [] // 过滤掉的数据
copyTableDate.forEach(item => {
if (item[prop] === '') { // item[prop]:将要排序那个字段的值
filterData.push(item) // item:表格中的这条数据,即row
} else {
reserveData.push(item)
}
})
// 排序
if (order !== null) {
if (order === 'desc') { // 降序
reserveData = reserveData.sort((a, b) => {
return b[prop].localeCompare(a[prop], 'zh-CN', { numeric: true })
})
// 过滤掉的数据添加到数组末尾
} else { // 升序
reserveData = reserveData.sort((a, b) => {
return a[prop].localeCompare(b[prop], 'zh-CN', { numeric: true })
})
}
this.$refs.plxTable.loadData(reserveData.concat(filterData))
} else {
// 取消排序
// this.copyTable是在接口得到表格数据的时候拷贝了一份,用来还原取消排序时的表格数据
this.$refs.plxTable.loadData(this.copyTable)
}
},
记住,umy 和 element 有不一样, 比如 sortRule 名称
prop:排序的字段、order:升序(ascending)、降序(descending)、取消排序(null)
prop:排序的字段、order:升序(asc)、降序(desc)、取消排序(null)