采用虚拟列表umy-UI 后自定义表格排序

问题： 当我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)
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

记住，umy 和 element 有不一样， 比如 sortRule 名称

prop：排序的字段、order：升序（ascending）、降序（descending）、取消排序（null）
prop：排序的字段、order：升序（asc）、降序（desc）、取消排序（null）

！！！！ 记住。:remote-sort=“true”，不然无效。

另外感谢之前看到的一篇博客，手速 快了没有留下来连接，