需求：
1.表格多选
2.支持翻页
3.支持当前页全选
效果如下：
IMG.jpeg
思路：
1.将每页全部选中的数据存放到一个数组中
2.将当前页码选中的数据存到一个数组中
3.获取一个键值，标识当前行的唯一键的名称
实现：
1.初始化数据
driver_id:[],
multipleSelectionAll:[],//所有选中的数据包含跨页数据
multipleSelection:[],// 当前页选中的数据
idKey: 'driver_id', // 标识列表数据中每一行的唯一键的名称
2.复选框改变时的事件
//复选框
handleSelectionChange(val){
let driver_ids =[];
val.map(item =>{
driver_ids.push(item.driver_id);
})
this.form.sels = driver_ids.join(',');
this.driver_id = driver_ids
this.multipleSelection = val;
this.multipleSelectionAll = Array.from(new Set(this.multipleSelectionAll.concat(driver_ids))); // 去重
//实时记录选中的数据
setTimeout(()=>{
this.changePageCoreRecordData();
}, 50)
},
3.翻页记忆核心部分：
// 记忆选择核心方法
changePageCoreRecordData () {
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
if (this.multipleSelectionAll.length < 0) {
this.multipleSelectionAll = this.multipleSelection;
return;
}
// 总选择里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach((row,index)=>{
selectAllIds.push(row[idKey]);
})
let selectIds = []
// 获取当前页选中的id
this.multipleSelection.forEach(row=>{
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
})
let noSelectIds = [];
// 得到当前页没有选中的id
this.tableData.forEach(row=>{
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
})
noSelectIds.forEach(id=>{
if (selectAllIds.indexOf(id) >= 0) {
for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
if (that.multipleSelectionAll[i][idKey] == id) {
// 如果总选择中有未被选中的，那么就删除这条
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
let driver_id =[];
this.multipleSelectionAll.map(item => {
driver_id.push(item.driver_id);
})
this.form.sels = driver_id.join(',');
if(this.multipleSelectionAll.length > this.total) {
let ID = this.multipleSelectionAll[this.multipleSelectionAll.length - 1].driver_id
this.tableData.forEach(row=>{
if(row.driver_id == ID) {
this.$refs.multipleTable.toggleRowSelection(row); //实现打钩
}
})
}
},
4.请求翻页重新取得数据时再次勾选上记忆中的选项
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length < 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
if(this.selectAllIds!=null){
this.$refs.multipleTable.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (this.selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="multipleTable"
this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
}
}
}
},
前端小白一枚，希望能够帮到你，欢迎留言评论！
喜欢的点赞和关注哦！！
