切换页码保存选中数据

切换页码选中数据不清空
方法一:在当前页遍历,判断选择的数据在此页中是否被选中,是否在缓存区
点击保存时,将缓存的数据存进真正需要的地方
初始化时,将真实数据赋给暂存数据
取消时,恢复初始数据
selection 是当前选中的数据
RelateCacheCode缓存选中未保存的数据
projectList 当前页的数据

dealSelect (selection) {
      // selection是当前选中的数据
      let ids = []
      this.RelateCacheCode.forEach(item => {
        ids.push(item.projectId)
      })
      let selectIds = []
      selection.forEach(item => {
        selectIds.push(item.projectId)
      })
      this.projectList.forEach(item => {
        if (selectIds.indexOf(item.projectId) > -1) {
          let index = ids.indexOf(item.projectId)
          // 是当前页的数据并且被选中
          if (index === -1 || !ids.length) {
            // 不在所有操作的选中的数据里面,说明是新增的一条,加到选中数据里面
            this.RelateCacheCode.push(item)
          }
        } else {
          // 当前页的数据,但没被选中
          let index = ids.indexOf(item.projectId)
          if (ids.length && index > -1) {
            // 判断此数据是否在所有选中数据里,存在,则是取消勾选,应当删掉此条
            this.RelateCacheCode.splice(index, 1)
            // 缓存选中数据也要相应减少一条
            ids.splice(ids.indexOf(item.projectId), 1)
          }
        }
      })
    },
// 回显时使用下面判断
              this.projectList.map((item, i) => {
                if (this.RelateCacheCode.length !== 0) {
                  let selectedId = []
                  this.RelateCacheCode.forEach((item, index) => {
                    selectedId.push(item.projectId)
                  })
                  if (selectedId.indexOf(item.projectId) !== -1) {
                    item.checked = true // 是否勾选
                  }
                }
              })

方法二:使用多维数组保存选中数据,此方法不需要暂存数据,但是产品说我要加个搜索功能,就不能使用了(不推荐)

this.SelectList[this.currentPage] = selection
// 保存时降维处理
let list = this.SelectList.flat(Infinity)
// 回显时使用SelectCodeList的降维数组判断(初始化时也需要赋值)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容