Vue2中弹窗使用el-table勾选框多选回显问题

最近写了一个功能，页面显示table-p1列表数据（p1），列表具有编辑功能，点击某条数据的编辑按钮，展示一个弹窗(p2)，弹窗中又使用el-table加勾选框展示对应数据table-p2，默认全选，重新勾选并确认后，再打开弹窗需要回显上次选择的数据，全选没问题，再次打开回显上次数据遇到了bug，搞了好久才解决。

全选

思路

这个比较简单，使用ref+$nextTick+toggleAllSelection即可实现。给table-p2(弹窗中的el-table)绑定ref='multipleTable'，点击编辑时全选。

实现(只含关键代码)

this.$nextTick(()=>{
    this.$refs.multipleTable.toggleAllSelection()
})

注意：必须使用$nextTick，不用的话会获取不到ref绑定的数据。

回显多选选择框

思路

使用ref+$nextTick+toggleRowSelection，toggleRowSelection有两个参数，第一个参数是需要勾选的对象，第二个参数是要不要勾选（true或false），为true时就是勾选这个选择框。

点击编辑按钮时，取到可以勾选的全部数据后给到table-p2(弹窗中的el-table)，在table-p1每条数据中手动添加一个属性selectData，获取到当前勾选的数据后，将勾选的数据赋值给对应数据的selectData。再次编辑时，直接遍历之前存的selectData，给每条数据都执行toggleRowSelection，

问题

用以上思路多选回显没有生效，经过试验发现，toggleRowSelection中传入记录的数据，并不会生效，要传入当前勾选表格中的数据才会生效，我这里就是得取table-p2中的数据才能生效。

解决方法

在思路的基础上增加逻辑：在table-p2数据中找到对应selectData的数据，取table-p2里面的数据。

实现(只含关键代码)

// 定义table-p1传进来的当前数据为row，table-p2中显示的table数据为gridData
this.$nextTick(()=>{
    row.selectData.forEach(i=>{
        let sevm = this.gridData.find(v=>v.id===i.id)
        this.$refs.multipleTable.toggleRowSelection(sevm,true)
    })
})