vue + elementUi 中使用table组件实现分页多选和记忆选中功能
功能介绍：使用vue + elementUi表格，实现数据动态加载下的分页多选以及页面变动后记忆选择。
页面代码如下：
@current-change="handleCurrentChange"
:current-page.sync="page.pageNum"
:page-size="page.pageSize"
layout="total, prev, pager, next , jumper"
:total="page.pageTotal">
data方法里面的代码如下：
tableData: [], // 表格数据
multipleSelectionAll:[],//所有选中的数据包含跨页数据
multipleSelection:[],// 当前页选中的数据
idKey: 'yid', // 标识列表数据中每一行的唯一键的名称
page:{
//每页数据量
pageSize:15,
//数据总数
pageTotal:0,
//当前页，从1开始
pageNum:1,
}
methods逻辑代码如下：
methods: {
//分页处理
handleCurrentChange(val){
this.query.pageNum = val;
this.changePageCoreRecordData();
this.initUser();
},
handleSelectionChange (val) {
this.multipleSelection = val;
//实时记录选中的数据
setTimeout(()=>{
this.changePageCoreRecordData();
}, 20)
},
/// 设置选中的方法
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let selectAllIds = [];
let that = this;
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
this.$refs.table.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="table"
this.$refs.table.toggleRowSelection(this.tableData[i], true);
}
}
},
// 记忆选择方法（核心部分）
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=>{
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;
}
}
}
})
},
//初始化数据 分页获取的数据可以和写法可以根据自己需要修改
async initUser(){
const res = await getAdmin(this.query);
if(res && res.data){
this.tableData = res.data.pageData ? res.data.pageData : [];
this.page.pageTotal = res.data.totalSize; //数据总数
// this.page.pageSize = 1;//每页数据量
// this.page.pageNum = res.data.pageNum;//当前页，从1开始
setTimeout(()=>{
this.setSelectRow();
}, 20)
}
},
//保存 输出部分选择中的数据
handleChooseData(){
console.log(this.multipleSelectionAll)
}
}
参考博客链接：https://www.cnblogs.com/wanglu/p/9160416.html