【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决]

项目场景：

点击按钮，弹出一个弹出框，内部出现一个table表，表内数据是动态获取，同时得勾选上几个table表的数据，类似以下的图

问题描述

点击按钮显示弹出框，加载table中的数据，默认选择table表数据失效

//template
<el-dialog :visible.sync="openDialog"><el-table ref="multipleTableRef" :data="aaa"><el-table-column type="selection" width="55" align="center" /><el-table-column label="aa" align="center" prop="aa"/></el-table>
</el-dialog>
//methods
handleShowWechatList(){....requestxxxx().then(res=>{this.aaa=res;//table表的数据//this.bbb是table表中被默认选中的数据if(this.bbb.length>0){this.bbb.map(row=>{this.$refs.multipleTableRef.toggleRowSelection(row);})}this.openDialog=true;//显示弹出框})
....
},

---

原因分析：

原因一: table表数据aa 没有渲染完就调用toggleRowSelection方法

原因二: 使用this.$refs.multipleTableRef.toggleRowSelection选中数据源和table数据源不一样

原因三: 因为是弹出框，需要等弹出框渲染成功后才能进行在进行toggleRowSelection选中操作

---

解决方案：

提示：使用$nextTick()延迟执行toggleRowSelection方法，同时toggleRowSelection方法中的参数得跟table表的数据源一样

//template
<el-dialog :visible.sync="openDialog"><el-table ref="multipleTableRef" :data="aaa"><el-table-column type="selection" width="55" align="center" /><el-table-column label="aa" align="center" prop="aa"/></el-table>
</el-dialog>//methods
handleShowWechatList(){
....requestxxxx().then(res=>{this.aa=res;//table表中的数据this.openDialog=true;//显示弹出框//this.bbb是table表中被默认选中的数据// 渲染和被渲染的数据源得相同if(this.bb.length>0){for(let i in this.aa){for(let q in this.bb){if(this.bb[q]["id"] == this.aa[i]["id"]){//等dom渲染完成，延迟执行nextTick内部函数this.$nextTick(()=>{this.$refs.multipleTableRef.toggleRowSelection(this.aa[i]);})break;}}}}})
....
},

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教