element-plus dialog中表格选中回显问题

代码实例：

<el-dialog
        v-model="data.dialogVisible"
        width="800px"
        :show-close="false"
        :before-close="handleClose"
        :modal="false"
        destroy-on-close
    >
      <template #header="{close}">
        <div class="my-header">
          <div class="my-header-name">添加分类</div>
          <el-icon style="cursor: pointer" @click="close">
            <Close/>
          </el-icon>
        </div>
      </template>
      <div class="dialog-content">
        <div class="search-box" style="margin-top:5px">
          <el-select @change="searchHandle()" clearable v-model="data.searchInfo.course_classify_id" class="mr-20"
                     placeholder="请选择课程分类">
            <el-option
                v-for="item in data.courseClassifyList"
                :key="item.id.toString()"
                :label="item.name"
                :value="item.id.toString()"
            />
          </el-select>
          <el-input
              style="width:216px;"
              v-model="data.searchInfo.name"
              class="mr-20"
              placeholder="课程名称"
          >
            <template #suffix>
              <el-icon class="el-input__icon">
                <component :is="Search" @click="searchHandle()"></component>
              </el-icon>
            </template>
          </el-input>
        </div>
        <el-table ref="multipleTableRef" :row-key="(row)=>{return row.id.toString()}" @selection-change="handleSelectionChange" :row-style="{height:'50px'}"
                  :data="data.list"
                  style="width: 100%;margin-top:20px">
          <el-table-column type="selection" width="100"/>
          <el-table-column prop="course_classify.name" label="所属分类"/>
          <el-table-column prop="name" label="课程名称"/>
          <el-table-column label="价格（元）">
            <template v-slot="scope">
              ￥{{ scope.row.price }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-model:currentPage="data.searchInfo.page"
                         v-model:page-size="data.searchInfo.limit"
                         background
                         layout="prev, pager, next,jumper"
                         :total="Number(data.searchInfo.total)"
                         @current-change="handleCurrentChange"/>
        </div>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" style="width:83px;" @click="addCourse()"
        >确定</el-button
        >
        <el-button style="width:83px;" @click="handleClose">取消</el-button>
      </span>
      </template>
    </el-dialog>

因为是dialog，普通的v-model="data.dialogVisible"只是去控制显隐并不会重新渲染，所以我们用到dialog的destroy-on-close属性，让弹窗去销毁渲染

const  multipleTableRef = ref(null)
function chooseCourse() {
  data.dialogVisible = true;
  data.multipleSelection = data.selectedCourseList
  nextTick(()=>{
    data.multipleSelection.forEach((item)=>{
      multipleTableRef.value.toggleRowSelection(item,true)
    })
  })
}

注意，先重新加载dialog，然后进行选中操作