1.vue部分主要是这两处地方需要加上::row-key="(row) => { return row.id }" 以及 :reserve-selection="true"

<el-table
  ref="multipleTable"
  :data="nodeList"
  style="width: 100%"
  border
  height="400"
  :row-key="(row) => { return row.id }"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
  <el-table-column label="Number" type="index" width="100" align="center" />
  <el-table-column label="IP Address" align="center" prop="ip" />
  <el-table-column label="Region" align="center" prop="region" :formatter="regionFormat" />
  <el-table-column label="Country" align="center" prop="country" />
</el-table>

2.script部分在接口返回的数据中加上这句:

this.selectIdList.map(row => {
 this.$refs.multipleTable.toggleRowSelection(row, true)
})

但是注意,如果表格在好几个tab页下面,或者在任何循环下,打印this.$refs.multipleTable就会发现这是个数组,这时,就无法像上面那样回显,需要进行for循环:

row.selectIdList.map(item => {
  this.$nextTick(() => {
    for (let i = 0; i < this.$refs.multipleTable.length; i++) {
      this.$refs.multipleTable[i].toggleRowSelection(item, true);
    }
  });
});

想要清空选择如下:

this.$nextTick(() => {
  for (let i = 0; i < this.$refs.multipleTable.length; i++) {
    this.$refs.multipleTable[i].clearSelection();
  }
})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐