element-ui table组件属性:reserve-selection分页保留勾选项

文章介绍了在使用Element-UI的Table组件时,如果表格带有分页功能,勾选状态在切换页面后无法保留的问题。通过启用`reserve-selection`属性并配合`row-key`设置唯一标识,可以保存和恢复用户的选中状态,确保在分页请求新数据时,之前的选择仍能被记住。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

element-UI 的table表格数据有提供多项框 type="selection" 的功能,但如果表格有分页功能,例如在第1页进行了数据勾选,等切换到其他页面,再回到第1页,勾选状态就不存在了。这是因为分页要重新请求后台数据,这样上一次请求的数据的勾选状态就不存在了。
element提供了reserve-selection可以保存数据更新前选中的值,这个属性需要搭配 row-key 指定一个唯一标识。

1、代码展示:

HTML部分:

<el-table size="mini" 
          :data="tableListArr.records" 
          border max-height="250"
          style="text-align:center;color: #000000;margin-top:10px;background:#f8f8f8;" 
          @select="select"
          :row-key="getRowKeys"
          >
    <el-table-column type="selection" width="60" align="center" fixed 
         :reserve-selection="true">
    </el-table-column>
</el-table>

JS部分:

methods:{
    getRowKeys(row) {
      return row.woId
      // 需要return的是一个唯一的标识值
    },
}

2、扩展:

 

 

### reserve-selection 的使用及其对其他表格的影响 `reserve-selection` 是 Element UI 中 `el-table` 组件的一个属性,用于在分页场景下保留用户已选中的行数据[^1]。启用该功能后,在切换页面或其他操作时,先前被选中的行仍然保持其选中状态。 然而,这种行为可能会对其他表格或同一页面上的多个表格产生一些潜在影响: #### 1. **跨表格冲突** 如果在同一页面上存在多个带有 `reserve-selection=true` 属性的表格,则可能出现以下情况: - 如果这些表格共享相同的数据源(即绑定到同一个数组),则它们之间的选中状态会相互干扰。 - 解决方案:通过设置唯一的 `row-key` 来区分不同表格中的每一行数据[^3]。例如,可以为每张表格定义不同的键名作为唯一标识符。 ```javascript methods: { getRowKey(row) { return `${this.tableId}-${row.id}`; // tableId 可以为每个表格单独赋值 } } ``` #### 2. **性能问题** 当启用了 `reserve-selection` 并且处理大量数据时,可能会影响渲染效率。这是因为框架需要额外维护一份内部缓存来跟踪哪些项已被选中[^4]。 解决方案之一是在必要时候销毁并重新创建整个 `<el-table>` 实例,从而清除旧的状态信息而不必担心残留的选择记录干扰新加载的内容显示效果: ```html <template v-if="shouldRender"> <el-table ...> </template> ``` 在此基础上动态控制变量 `shouldRender` 值的变化即可达到目的. #### 3. **交互逻辑复杂化** 随着更多业务需求加入进来,比如支持全选/反向选择等功能的同时还要兼顾记忆机制的话,整体代码结构容易变得臃肿难以维护. 为此建议封装成独立组件形式以便于管理以及重复利用相关功能模块. --- ### 示例代码片段展示如何正确配置多表环境下的 reserve-selection 功能 以下是基于 Vue.jsElement Plus 的一段示范程序说明上述提到的最佳实践方式: ```vue <template> <div> <!-- 表格A --> <el-table ref="tableARef" :data="tableADatasource" @selection-change="handleSelectionChange('a', $event)" style="width: 100%" :row-key="getRowKeyForTableA" reserve-selection> <el-table-column type="selection"/> ... </el-table> <!-- 表格B --> <el-table ref="tableBRef" :data="tableBDatasource" @selection-change="handleSelectionChange('b', $event)" style="width: 100%" :row-key="getRowKeyForTableB" reserve-selection> <el-table-column type="selection"/> ... </el-table> </div> </template> <script setup lang="ts"> import {ref} from 'vue'; const tableADatasource = [...]; // 初始化 A 数据集 const tableBDatasource = [...]; // 初始化 B 数据集 // 定义两个获取 Row Key 方法分别对应两张表 function getRowKeyForTableA(row){ return `table-a-${row.uniqueField}`; } function getRowKeyForTableB(row){ return `table-b-${row.anotherUniqueField}`; } // 处理选择变化事件 function handleSelectionChange(tableIdentifier:string, selectedRows:any[]){ console.log(`Selected rows on ${tableIdentifier}:`,selectedRows); } </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值