vue表格分页勾选状态保留

2024年5月14日 122次阅读 来源: wei佳 
  /** 解决当前页面搜索后依然保持表格多选状态 * currentPageData 当前页所有数据 * currentPageSelected 当前页已选数据 * currentPageNotSelected 当前页未选数据 * */
    resolveAllSelection() { 
      const currentPageData = (this.$refs.tableReff.getTableData().visibleData).map(item => item.id) // 当前页所有数据
      const currentPageSelected = this.multipleSelection.map(item => item.id) // 当前页已选数据
      const currentPageNotSelected = currentPageData.filter(item => !currentPageSelected.includes(item)) // 当前页未选数据
      // console.log(currentPageData, 'currentPageData')
      // console.log(currentPageSelected, 'currentPageSelected')
      // console.log(currentPageNotSelected, 'currentPageNotSelected')
      // 将当前页已选数据放入所有已选项
      currentPageSelected.forEach(item => { 
        if (!this.keepAliveSelectData.includes(item)) { 
          this.keepAliveSelectData.push(item)
        }
      })
      // 将所有已选项数据中当前页没选择的项移除
      currentPageNotSelected.forEach(item => { 
        const idx = this.keepAliveSelectData.indexOf(item)
        if (idx > -1) { 
          this.keepAliveSelectData.splice(idx, 1)
        }
      })
    },
    原文作者：wei佳
    原文地址: https://blog.csdn.net/weixin_47426048/article/details/122364586
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞