El Table分页回显选中的数据

2024-05-09 2024-05-09 383 字 1 分钟

Web ElementUI

使用官方文档上的这两个方法

方法	解释说明
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 http://user.info[0].id，此种情况请使用 Function。
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

示例如下

vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<el-table
      style="width: 100%"
      :data="tableData"
      ref="showTable"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-key="(row) => { return row.userId }"
    >
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column type="index" width="55" label="序号" key="2"></el-table-column>
      <el-table-column label="姓名" prop="nickName" key="3"></el-table-column>
</el-table>

其中**:row-key="(row) => { return row.userId }"**中的row.userId是每行的唯一标识

Js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// 多选回显数据  其中echo是需要回显的数据
echoSelected() {
  this.tableData.forEach(item => {
    for (const data of this.echo) {
      if (data.userId === item.userId) {
        this.$nextTick(() => {
          this.$refs.showTable.toggleRowSelection(item, true);
        })
      }
    }
  })
},