ElementUI Table动态选中和取消选中数据收集与跨页回显

2023-11-14 07:44:59

如何解决 ElementUI Table 组件默认全选的弊端

简介

ElementUI 的 Table 组件默认情况下提供了全选功能，这在处理小规模数据时很方便。但是，当处理大量数据时，默认全选会带来性能问题和后端处理负担。本文将介绍如何解决 ElementUI Table 默认全选的弊端，实现动态选中和取消选中数据收集，并解决跨页回显的问题。

解决方法

要解决 ElementUI Table 默认全选的问题，需要采取以下步骤：

1. 添加 row-key 属性

row-key 属性唯一标识每行数据，这对于动态选中和取消选中数据收集以及跨页回显至关重要。

<el-table :data="tableData" row-key="id">
  ...
</el-table>

2. 添加 selection-type 属性

selection-type 属性设置选中类型，将其设置为 checkbox 以启用单选或多选。

<el-table :data="tableData" row-key="id" selection-type="checkbox">
  ...
</el-table>

3. 添加 @selection-change 事件

@selection-change 事件在选中或取消选中数据时触发，它接收一个参数 val，包含选中的数据和取消选中的数据。

<el-table :data="tableData" row-key="id" selection-type="checkbox" @selection-change="handleSelectionChange">
  ...
</el-table>

handleSelectionChange(val) {
  // 获取选中的数据
  const selectedRows = this.$refs.table.selection;

  // 获取取消选中的数据
  const canceledRows = val.filter(row => !selectedRows.includes(row));

  // 将选中的数据和取消选中的数据发送给后端
  this.$axios.post('/api/updateSelection', { selectedRows, canceledRows });
}

4. 添加分页功能并实现跨页回显

分页功能允许用户在大量数据中分批浏览，跨页回显功能确保在翻页时保留选中状态。

<el-table :data="tableData" row-key="id" selection-type="checkbox" @selection-change="handleSelectionChange" :pagination="true">
  ...
</el-table>

// 实现跨页回显
created() {
  // 从本地存储中获取选中的数据和取消选中的数据
  const selectedRows = localStorage.getItem('selectedRows');
  const canceledRows = localStorage.getItem('canceledRows');

  // 将选中的数据和取消选中的数据设置到Table组件中
  this.$refs.table.toggleRowSelection(selectedRows, true);
  this.$refs.table.toggleRowSelection(canceledRows, false);
}

// 在Table组件翻页时，将选中的数据和取消选中的数据存储到本地存储中
watch: {
  'tableData.currentPage'(val) {
    // 将选中的数据和取消选中的数据存储到本地存储中
    localStorage.setItem('selectedRows', JSON.stringify(this.$refs.table.selection));
    localStorage.setItem('canceledRows', JSON.stringify(this.$refs.table.selection));
  }
}