el-table的复选框的回显

<el-table v-if="state.resourceList.length" ref="multipleManageTableRef" :data="state.resourceList" :row-key="getRowKeys" @select="handleCheckBox" 
@select-all="handleSelectAll" @selection-change="handleSelectionChange" stripe style="width: 100%">
          <el-table-column type="selection" />
          <el-table-column prop="Name">

            <template #header>
              <div class="title">租户名称</div>
            </template>
          </el-table-column>
          <el-table-column prop="Status">

            <template #header>
              <div class="title">状态</div>
            </template>
            <template #default="scope">
              <div :class="scope.row.Status == 0 ? 'off' : 'on'">{{ scope.row.Status == 0 ? '禁用' : '启用' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Remarks">

            <template #header>
              <div class="title">备注</div>
            </template>
          </el-table-column>
        </el-table>

在用到table表格中，用到了表格的复选框。

实现复选框回显中最核心的语句就是：

nextTick(() => {               
  multipleManageTableRef.value.toggleRowSelection(multipleManageTableRef.value.data[index], true)
})

此处的multipleManageTableRef必须和table中绑定的ref的值是一致，然后调用

toggleRowSelection的方法，该方法主要是用于当前行的状态。详情可以查看官方文档。

需要注意的是：这里必须要nextTick包起来，否则不会生效。这个是亲测的。

toggleRowSelection：此方法的第一个不是必须按照上面那种写法来走，只要是与当前行的内容一致即可。在forEach中，选出符合当前的item也是可以的。第二个参数为true是可以的，在我测试的过程中，第二个参数是当前项的id也是可以的。

nextTick(() => {               
  multipleManageTableRef.value.toggleRowSelection(item, true)
})

以上主要是针对table中复选框回显的问题进行记录。