element-ui table组件 数据更新之后保留之前选中的数据

最新推荐文章于 2025-11-18 14:26:23 发布
原创 最新推荐文章于 2025-11-18 14:26:23 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Element UI的el-table组件中，通过设置row-key和reserve-selection属性来保留用户选中的行，即使在数据更新或排序后，选中状态依然保持不变。
部署运行你感兴趣的模型镜像

step1:

el-table 标签,指定 row-key 属性

step2:

el-table-column 中设置了type=selection 的列，指定 reserve-selection 属性

（属性值为 true / false，true 代表保留， false代表不保留）

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
10-16
在介绍Vue Element-UI Table组件的动态生成表头和数据、修改单元格格式以及父子组件通信的过程中，涉及到了Vue框架的诸多核心知识点。以下将详细解释这些知识点。 首先，Vue是一种构建用户界面的渐进式框架。它的...
精选资源
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
el-table中选择框在分页的时候保持选中状态
xuefeng11111的博客
10-22 855
el-table分页的时候保持之前的选中项状态 需要在el-table上设置row-key属性，并在el--table-column中type='selection'一项设置:reserve-selection="true" <!-- 设置row-key --> <el-table :row-key='row => row.id'> <!-- 设置reserve-selection --> <el-table-column type="selection"
element中table的表格更新数据之后保留原来的勾选状态
https://shixuebin.gitee.io/hexo-blog/
07-21 1626
仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
《Vue项目开发实战》第七章：组件封装--vxeTable
最新发布
sen_shan的专栏
11-18 813
这篇文章详细介绍了在Vue3项目中使用vxe-table组件进行二次封装的方法。主要内容包括：1）安装配置vxe-table及样式；2）封装包含工具栏、分页等功能的Table组件；3）组件属性和事件接口的定义；4）实现自动筛选、分页绑定等核心功能；5）提供完整的API文档和使用示例。文章重点讲解了组件的TS类型定义、性能优化建议，以及如何通过插槽实现灵活定制。该封装组件支持排序、筛选、编辑等常见表格功能，可作为项目中表格展示的统一解决方案。
element table表格选中一行后 刷新数据保持选中状态
乔木丷的博客
05-08 2419
element table表格选中一行后 刷新数据保持选中状态 <el-table 中加入以下代码 type=selection :reserve-selection="true" :row-key="row => row.id" highlight-current-row="true"
ElementUi多选框表格,数据更新保持历史选中
aliven1的博客
02-24 2213
第一步：给表格添加 row-key 关键点：:row-key="(row) => row.id" 第二步：给多选框加默认选中功能 关键点：:reserve-selection="true" 切换分页持久化选中表格，其实关键代码就这2行 注意id需要唯一 其他可能用到的方法 @selection-change 会返回所有选中的数据 @select 会返回所有选中的数据及当前操作的数据 清空所有选中 this.$refs.table.clearSelection(.
【解决】Element UI表格Table组件，点击翻页后之前选中的数据仍保留，勾选中的样式也会回显
qq_34179819的博客
10-11 1392
2.经过以上两个属性的操作，发现在第一页勾选的数据在跳转到其他页时，可以得到在第一页时勾选的值，在@selection-change方法既handleSelectionChange方法内可以拿到。，勾选的数据倒是可以保留，但是不会回显：也就是说我从其他页再跳回第一页时，之前勾选的第一页的数据还在，但是页面的勾选框显示未勾选状态。使用Element UI的表格Table组件，在第一页选中的数据，跳转到第其他页再返回第一页时，选中的数据消失。4.继续查看文档，又发现。
element ui页面刷新或者数据重新加载时复选框保持选中状态
lannieZ的博客
10-14 2647
<el-table :data="tableData.list" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="rowKey"> <el-table-column type="selection" width="55" :reserve-selection="true" /> <el-table-column alig
ELEMENT-UI 更新TABLEDATA 中 ROW的某一个属性时，没有更新视图的问题
Study_Live_Sun的博客
10-27 800
在一个报警音管理的页面中，每次点击试听的时候，需要把‘试听’ 更新为 ‘停止’， 起初我们给row.play=0时，显示为 试听，row.play=1时显示为停止， 但是在代码中每次为row.play赋值时，虽然代码运行，但是页面视图并没有更新。 经过多种资料的参考，发现table表格数据，每次只能监听整个row的变化，row中某个属性变化时，是无法追中的。 所以在改变row.play时，我们先设置row.play=1， 再this.$set(tableData,index,row) 来更新ta
使用element-ui table expand展开行实现手风琴效果
10-17
在本文中，我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细...
精选资源
vue-element-table-edit:基于vue和element ui的table,在table内部进行每条数据编辑保存和删除 https
05-12
`vue-element-table-edit` 是一个基于 Vue.js 和 Element UI 的扩展项目，它专门针对表格数据操作进行了增强，允许用户在表格内部直接对每一条数据进行编辑、保存和删除操作，大大提升了数据管理的便利性。...
解读element-ui中table组件部分源码与需求分析
04-01
### 解读element-ui中table组件部分源码与需求分析 #### 一、前言 Element UI自开源以来，迅速成为了前端开发中后台系统的首选UI框架之一。与Vue、React、Angular这样的主流前端框架并肩作战，Element UI尤其在中...
elementUI Table 表格编辑数据后停留当前位置
农码精神
04-18 1904
data() {return {scrollTop: '', // 滚动条位置elTable: this.$refs.elTable.bodyWrapper, // 获取table表格父级的classname},table表格出现滚动条渲染的结构和样式。
elementUi 保持表格选中状态，el-table保存选中项
guodanpidashu的博客
02-09 1900
el-table保持选中，保存选中项
elemet-ui table刷新不改变勾选状态
weixin_45969939的博客
09-01 609
<el-table :data="goodsData" border size="mini" height="350" ref="table" :row-key="getRowKeys" @selection-change="handleSelectionChange"> <el-table-column type="selection" :reserve-selection="true" width="55" align="center"> &lt
elementui上面勾选的数据 赋值到下面的数据 分页之后保留之前勾选的数据
a444251443的博客
03-12 657
elementui 双表格 翻页带上之前勾线的数据 项目需要 上面的数据赋值到下面的table=>这个简单 只涉及到一个复制数据的问题;() 多选框的事件 tablechange(val) { // this,copyData就是下面表格是数据 this.copyData=this.LightData.concat(val); ...
element中table表格多选项翻页或者切换不同数据后保存之前选择的数据并返显选中的状态
前端三脚猫的博客
09-10 3820
问题需求: 我们需要做一个选择表格中显示咨询意见的数据,但是因为点击不同的选项后会发送请求展示不同的数据,table表格普通的方法在选择新的数据后之前选择的数据就会消失,现在需要保存用户所选择的所有信息, 解决方法: 查找后发现Element中有一个自带的方法 reserve-selection, 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） 在项目中的使用方法: 在type=“selection” 那一列
element ui页面刷新或者数据重新加载时复选框保持选中
weixin_43684328的博客
04-13 1993
this.$nextTick(()=>{ arrays.forEach((row,index,arr) => { _this.JsspZpVO.spyVOS.forEach(item=>{ if(row.bh==item.bh){ arr[index].sfwzz=item.s...
Element-ui table组件，多选禁止使用全选
09-02
<think> 我们需要在Element UI的表格中禁用全选功能，同时保留多选功能（即可以单独选择每一行，但不能通过表头的复选框全选）。 实现思路： 1. Element UI的表格多选功能是通过在表格列中设置`type="selection"`来添加全选列。 2. 禁用全选功能可以通过隐藏全选列，但我们不能隐藏该列，因为需要保留单独选择的功能。因此，我们可以通过CSS隐藏全选框，或者通过设置全选框的禁用状态。 但是，Element UI并没有直接提供禁用全选的属性。我们可以通过以下方式实现： 方案一：使用header-row-class-name属性来设置表头行的样式，将全选列的表头单元格（th）中的全选框隐藏或禁用。 方案二：使用header-cell-style属性来设置表头单元格的样式，隐藏全选框。 方案三：使用插槽（slot）自定义表头，并在自定义表头中不渲染全选框，但保留每行的选择框。 然而，我们需要注意的是，仅仅隐藏全选框并不能阻止用户通过键盘（比如按空格）来全选，所以更好的方式是从逻辑上禁用全选。 实际上，我们可以通过监听表格的select-all事件，然后取消全选操作，并保留之前的选择状态。 具体步骤： 1. 给el-table绑定select-all事件，该事件在用户点击全选复选框时触发，参数是当前选中的行（如果全选则为所有行，取消全选则为空数组）。 2. 在select-all事件的处理函数中，我们立即将选中的行重置为之前选中的行（即取消全选操作带来的变化），这样就能防止全选。 同时，我们可以通过设置header-row-class-name来添加一个类名，然后通过CSS隐藏全选框，这样用户就看不到全选框，也就无法点击了。 综合方案： 步骤1：使用select-all事件来阻止全选操作。 步骤2：使用CSS隐藏全选框。 代码实现： 模板部分： ``` <template> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @select="handleSelect" @select-all="handleSelectAll" header-row-class-name="disable-select-all" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template> ``` 脚本部分： ``` <script> export default { data() { return { tableData: [/*...你的数据...*/], selectedRows: [] // 用于保存已选中的行 }; }, methods: { // 处理单行选择 handleSelect(selection, row) { this.selectedRows = selection; }, // 处理全选 handleSelectAll(selection) { // 当selection为空数组，表示取消全选，但我们不希望全选操作改变选中项，所以恢复为之前选中的行 // 当selection不为空，表示全选，但我们不允许全选，所以也恢复为之前选中的行 this.$nextTick(() => { this.$refs.multipleTable.clearSelection(); this.selectedRows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row, true); }); }); } } }; </script> ``` 样式部分： ``` <style> .disable-select-all .el-table__header-wrapper .el-checkbox { display: none; } </style> ``` 解释： 1. 我们在表格的header-row-class-name属性上绑定了一个类名`disable-select-all`，这样我们就可以通过CSS隐藏表头中的全选复选框。 2. 在handleSelectAll方法中，我们通过`clearSelection`清除所有选择（包括全选和取消全选操作带来的变化），然后重新选中之前已选的行（通过selectedRows保存）。这样，全选操作就不会改变当前的选择状态。 3. 注意：使用`$nextTick`确保在DOM更新后再重新设置选中状态，以避免与表格内部的状态冲突。 4. 我们还监听了`@select`事件，用于在单独选择行时更新selectedRows。 但是，这种方法有一个问题：当用户点击全选框时，虽然全选框被隐藏了，但事件仍然会触发。所以我们通过事件处理阻止了全选功能。 另外，隐藏全选框只是视觉上的，键盘操作还是可能触发，所以我们的事件处理是必要的。 但需要注意的是，如果表格没有数据，那么全选框不会出现，所以我们的处理也是安全的。 相关问题： 1. 如何实现表格的多选功能？ 2. 如何获取Element UI表格中当前选中的行？ 3. 如何动态禁用表格的某一行不可选？ 4. 如何实现跨页多选？ 按照要求，我们最后提出相关问题。 </think> 要在 Element UI 的 Table 组件中禁用全选功能但仍保留多选功能，可以通过以下两种方法实现： ### 方法一：使用 CSS 隐藏全选复选框（推荐） ```vue <template> <el-table :data="tableData" ref="multipleTable" @selection-change="handleSelectionChange" header-row-class-name="disable-select-all" > <el-table-column type="selection" width="55" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> </el-table> </template> <style> /* 隐藏表头全选复选框 */ .disable-select-all .el-table__header-wrapper .el-checkbox { display: none; } </style> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 } ], selectedItems: [] } }, methods: { handleSelectionChange(val) { this.selectedItems = val } } } </script> ``` ### 方法二：通过事件拦截全选操作 ```vue <template> <el-table :data="tableData" ref="multipleTable" @select-all="handleSelectAll" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="age" label="年龄" /> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 } ], selectedItems: [], // 保存当前选中状态 currentSelections: [] } }, methods: { handleSelectionChange(val) { this.selectedItems = val // 更新当前选中状态 this.currentSelections = [...val] }, handleSelectAll(selection) { // 立即恢复之前的选中状态 this.$nextTick(() => { this.$refs.multipleTable.clearSelection() this.currentSelections.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row, true) }) }) } } } </script> ``` ### 解释说明： 1. **方法一原理**： - 使用 `header-row-class-name` 给表头添加自定义类名 - 通过 CSS 选择器隐藏表头的复选框，但保留行级复选框 - 完全视觉隐藏全选功能，用户无法操作全选 2. **方法二原理**： - 监听 `@select-all` 事件（全选操作触发） - 在事件触发后立即清除当前选择状态 - 使用 `toggleRowSelection` 逐个恢复之前选中的行 - 使用 `$nextTick` 确保在 DOM 更新后执行恢复操作 3. **注意事项**： - 方法一更简单高效，推荐优先使用 - 方法二需要维护当前选中状态，适合需要动态控制的场景 - 两种方法都不会影响单独行的选择功能 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值