在iview的table组件中，前端在多选时如果点击下一页则丢失了上一页table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）
实现效果
全选反选 选中单条 取消单条
selectedData: [], // 选中的数组
arr1: [], // 原本
arr2: [] // 去重后的
<Table class="mt20" :data="tableData" :loading="loading" :columns="tableColumns" ref="table"
@on-select="onSelectAll" @on-select-cancel='onSelectCancel'
@on-select-all ='onSelectAll' @on-select-all-cancel='onSelectAllCancel'>
</Table>
// 点击全选时触发
onSelectAll (selection) {
// arr1 去重之前的 选中后合并的数组
this.arr1 = [...selection, ...this.selectedData]
// 去重 some 和every 相反，只要有一个满足条件，就返回true
for (let val of this.arr1) {
if (!this.arr2.some(item => item.serialNum === val.serialNum)) {
this.arr2.push(val)
}
}
if (this.arr2.length >= 30) {
this.enableModal = true
}
},
// 取消选中某一项时触发
onSelectCancel (selection, row) {
// 拿到取消选择的项数据 从arr2中去除 findIndex找返回传入一个符合条件的数组第一个元素位置,没有返回-1
let result = this.arr2.findIndex((ele) => {
return ele.serialNum === row.serialNum
})
this.arr2.splice(result, 1)
},
// 点击取消全选时触发
onSelectAllCancel () {
// 拿到当前分页的数据进行取消选中处理
// every方法，只要有一项不满足条件就返回false，也就是说必须每一项都得满足才能返回true。返回的是布尔值。
// * filter方法，只要条件满足，我就将此元素返回出去，返回的是元素。
// * 在本示例中，只要arr1中存在与arr2中相同的元素，我就返回false。也就是说，我拿着arr2中
// * 的第一项去和arr1中的每一项去比较，如果code都不相等，满足所有条件，我就返回true。
// * 在filter中，只要条件为true，我就将这一项返回出去，就实现了批量删除的效果。
this.arr2 = this.arr2.filter(item => {
return this.tableData.every(item2 => {
return item.serialNum !== item2.serialNum
})
})
},
本文采用 serialNum 作为唯一的值 可以选为id 根据具体情况而定
每次点击分页的时候，获取到最新一页的数据，进行选中回显
在点击分页 调用的事件里写
getTableList (pageIndex) {
this.pageIndex = pageIndex
this.loading = true
const data = {
name: this.name,
serialNum: this.serialNum,
pageIndex,
pageSize: this.pageSize
}
getDevicePageList(data)
.then(res => {
const { data: {data, code} } = res
if (data && code === 0) {
data.list.forEach(item => {
// 禁用选项
if (item.id === 19) { // 判断条件
this.$set(item, '_disabled', true)
}
this.arr2.forEach(element => {
if (element.serialNum === item.serialNum) {
this.$set(item, '_checked', true)
}
})
})
this.tableData = data.list
this.dataCount = data.total
} else {
this.$Message.error(res.message)
}
this.loading = false
}, err => {
// 接口错误
console.log(err)
})
.catch((err) => {
// 处理逻辑出错
console.log(err)
})
},
