方法一：

官方也有基于这种操作给出通过属性解决的方法：

<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)); } }

项目着急临时想的方法，欢迎有更好的方法的大佬指教