背景介绍：是一个寄样登记的表格，初始进来是空的，在右上角有一个添加寄样明细的按钮，点了添加寄样明细之后，会弹出一个弹框，有很多很多的产品列表，一页有十个产品，可以通过选中产品列表，比方说当前第一页选中5条，然后跳转到第二页，选中6条数据，再回到第一页，勾选中的数据依然是选中状态，点击添加之后，将添加11条数据到寄样登记的表格，从始至终整个过程都是在前端完成的，除了打开弹窗请求的产品列表需要请求接口。(主要的大致难点在于切换分页保存所有选中的数组，以及要将之前选中的所有数据默认渲染，以及取消选中的产品也要从所有数组中删除。)
大致思路：主要是弄一个全部选中的数组tableSelectList，这是一个二维数组，根据当前的分页页码，来定位当前页码中的选中数据，即this.tableSelectList[this.queryList.pageNum]，每次切换页码的时候，将需要选中的产品列表的index索引拿到，然后使用插件内置的方法this.$refs.multipleTable.toggleRowSelection(this.tableData[row]);，将所有数据默认选中即可。而且使用二维数组就可以直接通过赋值的方式，将取消选中的删除操作也轻松解决，点击添加的时候，使用ES6最新的数组方法flat()，即可将二维数组降维成一维数组。
1.首先，注册需要使用的变量
export default{
data(){
return{
tableSelectList:[], //所有选中的数据，根据页码的一个二维数组
queryList:{ //打开弹窗的请求参数
pageSize:10, //一页十条数据
pageNum:1,
},
tableData:[] //弹窗中的数组列表
productList:[] //寄样登记表格中的数组
}
}
}
2.在模板的talbe中绑定selection-change的事件，监听表格中的选中项，最主要是当取消选中的时候，也能触发selection-change的事件，弹窗绑定了打开的事件监听``
<template>
<el-table :data="tableData" @selection-change="getChooseItem" ref="multipleTable">
</el-table>
</template>
3.通过当前分页的页码，给当前页选中的值进行赋值
getChooseItem(value){ //表格选中项切换的事件 @selection-change
this.tableSelectList[this.queryList.pageNum]=value;
}
4.写一个默认值渲染的方法，在分页切换的时候调用这个方法，这里有一个坑是不用nextTick()会无效，因为设置选中的时候，DOM还没构建好，就会无法选中
tableDefaultSelect(){
let rows=[]; //先定义一个选中行的数组
if(JSON.stringify(this.tableSelectList)!=='[]'){ //先判定是否有值
let arr=this.tableSelectList.flat(); //将数组进行降维打击
for(let i in arr){
//ES6新出的findIndex，返回符合条件的索引位置，有则返回，无则返回-1，唯一标识id请根据实际修改
if(this.tableData.findIndex(x=>x.id===arr[i].id)>=0){
rows.push(this.tableData.findIndex(x=>x.id===arr[i].id));
}
}
this.$nextTick(()=>{ //等dom更新之后再选中，并且表格一定要设置ref
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(this.tableData[row]);
})}
});
}
},
//分页切换的时候请求接口，然后调用渲染默认值的方法
changePage(current){
this.queryList.pageNum=current;
//调用接口拉取到数据之后再调用渲染默认值的方法，调用接口请自行补充
this.tableDefaultSelect();
},
5.写最后的添加事件，我这里是直接push的，因为我在打开弹窗的时候，会将寄养登记表格中的已添加数据的id发送给后台，在获取列表的时候，就不会获取到已添加的数据了。不然的话不光渲染默认值不光要比较选中数据，还要对寄样登记表格中的数据进行默认值渲染。
addList(){
if(JSON.stringify(this.tableSelectList)!=='[]'){
let arr=this.tableSelectList.flat();
Array.from(arr,x=>this.queryList.productList.push(x));
}
},
6.如果需要不重复添加，我也封装了个不重复添加的方法，唯一标识的id请根据项目实际进行修改
//不重复添加
noRepeatAddList(value1,value2){
for(let i in value1){
let flag=true;
for(let j in value2){
if(value2[j].id===value1[i].id){
flag=false;
break;
}
}
if(flag){
value2.push(value1[i]);
}
}
},
网友评论