element 跨页选中,回显el-table选中数据

先配置row-key="id"和reserve-selection="true"属性,保证在数据更新之后保留之前选中的数据

javascript 复制代码

 <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="500"
        row-key="id"
      >
        <el-table-column :reserve-selection="true" type="selection" width="55"> 
        </el-table-column>
 </el-table>

下面这个方法用于回显,确保表格上有勾选样式

javascript 复制代码

toggleSelection(rows) {
      if (rows) {
        setTimeout(() => {
          this.tableData.forEach((item) => {
            rows.forEach((row) => {
              if (item.id == row.parkingId) {
// 如果 item 尚未被选中，则将其选中。如果 item 已经被选中，则代码不会执行任何操作，
                const isSelected = this.$refs.multipleTable.selection.some(
                  (x) => x.id === item.id
                );
                if (!isSelected) {
                  this.$refs.multipleTable.toggleRowSelection(item);
                }
              }
            });
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

// rows为选中行数据
this.toggleSelection(rows);

以下为AI解释

这段代码定义了一个名为 `toggleSelection` 的方法，用于在 Element UI 的 `el-table` 组件中根据传入的 `rows` 参数来选中或取消选中特定的行。下面是对代码的详细解释：

1. `toggleSelection(rows) { ... }`

定义了一个方法 `toggleSelection`，它接受一个参数 `rows`。`rows` 应该是一个包含行数据的数组。

2. `if (rows) { ... } else { ... }`

这个条件语句检查 `rows` 是否存在。如果 `rows` 参数被提供（即不是 `null` 或 `undefined`），则执行 `if` 分支中的代码；否则，执行 `else` 分支中的代码。

3. `setTimeout(() => { ... }, 0);`

使用 `setTimeout` 创建一个异步回调，该回调在当前调用栈结束后立即执行。这通常用于确保某些 DOM 更新完成后再执行代码。

4. `this.tableData.forEach((item) => { ... });`

遍历 `tableData` 数组中的每一项（这里命名为 `item`）。

5. `rows.forEach((row) => { ... });`

对于每个 `item`，再遍历传入的 `rows` 数组中的每一项（这里命名为 `row`）。

6. `if (item.id == row.parkingId) { ... }`

检查当前 `item` 的 `id` 是否等于 `row` 的 `parkingId`。如果相等，说明 `item` 是需要被选中的行。

7. `const isSelected = this.$refs.multipleTable.selection.some((x) => x.id === item.id);`

检查 `item` 是否已经在 `el-table` 的当前选中行列表中。

8. `if (!isSelected) { this.$refs.multipleTable.toggleRowSelection(item); }`

如果 `item` 尚未被选中，则调用 `toggleRowSelection` 方法将其选中。

9. `else { this.$refs.multipleTable.clearSelection(); }`

如果 `rows` 参数没有被提供，则调用 `clearSelection` 方法来取消选中所有行。

总结来说，这个方法用于根据传入的行数据数组 `rows` 来更新 `el-table` 组件的选中行。如果传入了 `rows`，则遍历 `tableData` 并根据 `rows` 中的 `parkingId` 来选中对应的行。如果没有传入 `rows`，则取消所有行的选中状态。通过这种方式，可以实现跨页保持选中状态的功能。