方法一：
官方也有基于这种操作给出通过属性解决的方法：
<el-table :row-key="rowKey">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>methods: {
rowKey (row) {
return row.id
}
}首先官网中对参数的描述是这样的：
:row-key ：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
:reserve-selection :仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key），该属性默认值为false
知道这些了，同时你还需要toggleRowSelection和clearSelection两个属性。
toggleRowSelection：
参数：row, selected
用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
clearSelection：用于多选表格，清空用户的选择。
结合这四个属性可以实现基本的表格选中，分页打勾留存状态，但是对于一些非常规操作打勾却不是很适用。
我遇到的需求是这样的首先在页面表格中点击 加号（图一），数据表格的弹窗会打开（图二），在弹窗中勾选需要的数据可以分页去选择，然后点击确定将选中的数据塞回页面的表格中（图一），再次点击 加号 弹窗打开 页面表格中的数据打勾情况会回显在弹窗中（图二）。
方法二：
我选用的方法分别是表格的两个选中方法 select和select-all，toggleRowSelection方法，整体的逻辑
1.单选时，判断临时存储的数组是否为空，为空则直接push，不为空则判断页面中是否存在该数据，存在则剪切掉代表取消打勾，不存在则push进去。
2.全选时,判断参数val是否存在，存在即是代表全部选中，直接push到临时数组，然后进行数组去重即可，如果val为空，则是代表全取消，因为选中的是当前页面的数据，所以直接从临时数组中删掉当前分页页面的数据即可。
3.最后要做的就是在每次数据加载的时候 使用toggleRowSelection的方法，让弹窗中的数据回显
来上代码：
<el-table
ref="multipleGoodsList"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection"></el-table-column>
</el-table>
export default {
data() {
return {
goodsList: [], //弹窗中每次请求的页面数据
selectedGoodsList:[]//临时选中的数组
selectedGoods:[] //页面中的表格
}
},
methods: {
//获取弹窗内的数据
getGoodsListFun() {
...
// 拿到数据后
// 当再次打开
this.$nextTick(() => {
if (this.selectedGoodsList.length && this.selectedGoodsList.length > 0) {
this.goodsList.forEach(row => {
this.selectedGoodsList.forEach(p => {
if (row.id === p.id) {
this.$refs.multipleGoodsList.toggleRowSelection(row);
}
});
});
}
});
...
},
//单选
handleSelect(selection,row){
if(this.selectedGoodsList.length && this.selectedGoodsList.length >0){
let index
index = this.isSelectedGoods(row, this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(row);
}
}else{
this.selectedGoodsList.push(row)
}
},
//判断是否存在的方法
isSelectedGoods(row, list) {
let rows = JSON.parse(JSON.stringify(row))
//是否选取 -1表示没选中
return list.findIndex(item => {
return item.id == rows.id;
});
},
//全选
handleSelectAll(val){
//全选
if(val && val.length > 0){
val.forEach(row=>{
this.selectedGoodsList.push(row)
})
//数组去重
let newData = {};
this.selectedGoodsList = this.selectedGoodsList.reduce((preVal, curVal) => {
newData[curVal.id]? "": (newData[curVal.id] = true && preVal.push(curVal));
return preVal;
}, []);
}else{
//全不选 直接从数组中删除当页的数据
for(let i = 0;i<this.goodsList.length;i++){
let index
index = this.isSelectedGoods(this.goodsList[i], this.selectedGoodsList)
if (index > -1) {
this.selectedGoodsList.splice(index, 1);
} else {
this.selectedGoodsList.push(this.goodsList[i]);
}
}
}
},
//弹窗上的确定选择按钮
choiceGoodsFun() {
this.selectedGoods = JSON.parse(JSON.stringify(this.selectedGoodsList))
this.closeDialog();
},
//关闭弹窗
closeDialog(){
this.selectedGoodsList = [];
},
//打开弹窗
openDialog(){
this.selectedGoodsList = JSON.parse(JSON.stringify(this.selectedGoods));
}
}项目着急临时想的方法，欢迎有更好的方法的大佬指教
