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

25 篇文章 1 订阅
15 篇文章 0 订阅
问题: 当我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)

!!!! 记住。:remote-sort=“true”,不然无效。
另外感谢之前看到的一篇博客,手速 快了没有留下来连接,
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值