dialog里第一次打开复选框回显不上的问题

问题描述：

dialog里放了一个带有复选框表格，操作列点击编辑带上当前行的数据打开dialog将数据渲染到表格上，选中勾选的数据。但是第一次打开弹框回显不上，第二次打开才可以，新增打开弹框再打开编辑也可以回显（新增和编辑是同一个弹框）。

解决问题关键：

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。-----意思是第一打开数据有了，但是dom节点还未加载好导致渲染不上。应该在dialog的open事件回调里嵌套一个setTimeOut渲染数据，有个坑要注意---在open回调里要判断这次打开弹框是编辑还是新增。

代码

定义事件 <el-dialog :title="titleAblity" :visible.sync="applicateAblityVisible" width="80%" @open="openAbilityDialog()" >

//编辑回显数据
openAbilityDialog() {
  if(this.titleAblity == "编辑能力申请"){
    this.$nextTick(() => {
    //回显对外服务能力
    setTimeout(() => {
      this.systemData.forEach((row) => {
      const matchedIndex = this.editData.systemInfos.findIndex(
        (item) => item.systemName == row.systemName
      );
      this.$refs["systemTable"].toggleRowSelection(row, matchedIndex != -1);
    });
    }, 500);
  });
复制代码

this.systemData是table所有数据，this.editData.systemInfos是行带回来的要勾选的数据。

**注意**: 回显勾选复选框按照elementui官网的勾选方法会勾选不上，需要拿着table的数据和呀勾选的数据双层循环比对对得上的再用官网提供的toggleRowSelection方法