vue弹窗多选表格默认选中问题

Question

表格展示数据，点击编辑的时候出来多选表格的弹窗，

要让弹窗默认选中表格的数据。
试了几种方法都不行。弹窗和表格在一个页面。不涉及组件传参。

```html
  <div style="width: 40%; height: 300px; margin-right: 100px">
      <el-button type="primary" @click="addDynamic(module.classifyID)" :key=""
        >编辑</el-button
      >
      <el-dialog title="请选择" :visible.sync="addDynamicVisible" >
        <el-table
         :row-key="getRowKeys"
          ref="multipleTable"
          :data="titleListA"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
          <el-table-column prop="newsTitle" label="动态" :reserve-selection="true"> </el-table-column>
        </el-table>
        
        <el-button @click="add(item1, item2)">保存</el-button>
      </el-dialog>
      <el-table :data="homeDynamicList" stripe border height="200px">
        <el-table-column  label="官网首页-动态" prop="newsTitle">
        </el-table-column>
        <el-table-
        <el-table-column align="center" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-top"
              circle
              type="primary"
              @click="moveUp(scope.$index, scope.row)"
            ></el-button>
            <el-button
              icon="el-icon-bottom"
              circle
              type="primary"
              @click="moveDown(scope.$index, scope.row)"
            ></el-button>
            <el-button
              icon="el-icon-close"
              circle
              type="danger"
              @click="deleteById(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    async addDynamic(item) {
      console.log(item);
      this.addDynamicVisible = true;
      this.getNewsTitleByClassifyId();
      let res = await getNewsTitle(item);
      this.titleListA = res.data;
    // this.arr.forEach((rows)=>{
    //   this.titleList.forEach((value)=>{
    //     if(rows.id===value.id){
    //       this.$refs.multipleTable.toggleRowSelection(rows,true)
    //     }
    //   })
    // })
    },

之前是在编辑方法里试图写数据回显，没生效。是写在dialog的openend事件里面，还是直接写编辑方法里面呢。两种都试了，都没生效。

Answer 1

如果你的数据绑定没有问题，那么大概率是因为元素还没有渲染好，你就开始设置勾选引起的。
可以尝试在设置勾选的时候加一个 nextTick 试一试，例如

  
 async addDynamic(item) {
      console.log(item);
      this.addDynamicVisible = true;
      this.getNewsTitleByClassifyId();
      let res = await getNewsTitle(item);
      this.titleListA = res.data;
      this.$nextTick(() => {
        this.arr.forEach(rows => {
          this.titleList.forEach(value => {
            if (rows.id === value.id) {
              this.$refs.multipleTable.toggleRowSelection(rows, true);
            }
          });
        });
      });
    }