切换页码选中数据不清空
方法一:在当前页遍历,判断选择的数据在此页中是否被选中,是否在缓存区
点击保存时,将缓存的数据存进真正需要的地方
初始化时,将真实数据赋给暂存数据
取消时,恢复初始数据
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的降维数组判断(初始化时也需要赋值)