项目场景：

点击按钮，弹出一个弹出框，内部出现一个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$

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

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

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

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