elementUI table多选设置默认勾选

最新推荐文章于 2025-04-16 14:27:38 发布

Eason_qyl

最新推荐文章于 2025-04-16 14:27:38 发布

阅读量8k

点赞数 7

分类专栏： WEB前端开发

本文链接：https://blog.csdn.net/qyl_0316/article/details/108583481

版权

WEB前端开发专栏收录该内容

132 篇文章

订阅专栏

问题：在调用接口返回数据时，table中的数据行根据后端返回的某些字段，默认勾选

解决：
elementUI 中：
在这里插入图片描述

toggleSelection(rows) {
  if (rows) {
     rows.forEach(row => {
       this.$refs.multipleTable.toggleRowSelection(row);
     });
   } else {
     this.$refs.multipleTable.clearSelection();
   }
 },

<el-table
    ref="multipleTableClinicRoom"
    :data="tableData" 
    stripe 
    border
    v-loading="tableLoading"
    highlight-current-row
    @row-click="handleCurrentChange"
    :cell-class-name="getCellIndex"
    class="clinic-area-table-area tb-edit"
    @selection-change="handleClinicRoomChange"
    empty-text="暂无数据">
    <el-table-column type="selection" width="55">
       ......
    </el-table-column>
   </el-table>

以上是表格数据的配置项，下面是实现的代码：

this.tableData.forEach((item, index) => {
   if (item.selectStatus === 0) {
   // 等表格数据加载完成后
      this.$nextTick(() => {
      // 注意：toggleRowSelection(item, true) 中 item 必须是行数据
        this.$refs.multipleTableClinicRoom.toggleRowSelection(this.tableData[index], true)
      })
    }
  })