iview table后端分页多选翻页选中回显

╰+攻爆jí腚メ 2023-06-15 04:53 5阅读 0赞

问题：在iview的table组件中，前端在多选时如果点击下一页则丢失了上一页table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）

定义data

@Provide() selectedIds: any = new Set();

// 处理table翻页选中的回显回来
        // cy 全选和取消全选时触发
        handleSelectAll (selection) {
          // 取消全选 数组为空
          if (selection.length === 0) {
            // cy 若取消全选，删除保存在selectedIds里和当前table数据的id一致的数据，达到，当前页取消全选的效果
            // 当前页的table数据
            let data = (this.$refs.selection as any).data
            data.forEach((item) => {
              if (this.selectedIds.has(item.id)) {
                this.selectedIds.delete(item.id)
              }
            })
          } else {
            selection.forEach(item => {
              this.selectedIds.add(item.id)
            })
          }
          //同步
          this.selectedSum = this.selectedIds.size
        }
        
        //  选中某一行
        handleSelectRow (selection,row) {
          this.selectedIds.add(row.id)
        }
        //  取消某一行
        handleCancelRow (selection,row) {
          this.selectedIds.delete(row.id)
        }
    	
    	//  这个函数就放在你点击翻页的函数里就行了（需要注意要在table将数据渲染完毕后执行，否则报错），
    	//  达到每次翻页加载时将以前选中的row勾选上的效果
        // cy 给跨页丢失的选中行重新添加选中状态
        setChecked () {
          // 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
          let objData = (this.$refs.selection as any).objData
          for (let index in objData) {
            if (this.selectedIds.has(objData[index].id)) {
              // cy 弊端 每次切换select都会触发table的on-select事件
              // this.$refs.purchaseTable.toggleSelect(index) // 在保存选中的ids的set合集里找与当前页数据id一样的行，使用toggleSelect（index），将这一行选中
              // cy 改进
              objData[index]._isChecked = true
            }
          }
        }

下一页获取数据执行下面方法：

//返回数据改版执行
    this.$nextTick(() => {//确保dom加载完毕
                        this.setChecked();
                    });

参考：[https://blog.csdn.net/qq\_19343775/article/details/90031761][https_blog.csdn.net_qq_19343775_article_details_90031761]

[https_blog.csdn.net_qq_19343775_article_details_90031761]: https://blog.csdn.net/qq_19343775/article/details/90031761