elementui 的 table组件需添加row-key,否则会导致预测不到后果，比如触发@current-change

最新推荐文章于 2024-06-06 14:59:16 发布
最新推荐文章于 2024-06-06 14:59:16 发布
阅读量1.1w 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhumengzj/article/details/107079215
版权

table需添加row-key，否则如果重新请求列表，会默认触发@current-change等等方法，因为重新渲染列表，current-change发生了改变，冲原本选择的row，变成不在选择任何一行，导致问题很难排查

zhumengzj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ElementUi表格节点row-key的问题
weixin_46300135的博客
10-26 6745
接口如未返回唯一不重复的标识，造成节点打不开一直加载中、控制台报错，可手动创建一个key值，在请求回来的数据里进行递归遍历，在每一条数据里增加一个标识 <template> /** row-key绑定手动创建的rowKey**/ <el-table row-key="rowKey"></el-table> </template> data(){ return { rowKey:1 //手动创建一个标识 递归遍历时让其自增 } } ...
el-table设置row-key
热门推荐
纳兹咩SAMA的博客
01-20 2万+
el-table中的row-key vue中key作用 key的作用就是更新组件时判断两个节点是否相同。相同就复用，不同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表中的文本值。添加key之后，Vue对比节点内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。 例： el-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。 原因： 删除一行数据时，Vue会认为我们把2变成了3，把3删除了。所以只
【VUE】el-table表格 实现滚动到底部加载更多数据
cdd9527的博客
06-06 729
【VUE】el-table表格 实现滚动到底部加载更多数据
el-table分页记录数据
snowball的博客
09-11 1985
一、需求背景 当多选表格操作比较频繁时候，一页数据的多选已经不能满足使用，那么我们需要记录每一页的数据，然后一起提交使用。 二、使用组件的情况 2.1、设置row-key :row-key="getRowKeys" <el-editable ref="multipleTable" class="el-table" :data="tableData" height="400" :row-key="getRowKeys"
el-table拖动排序，使用Sortable.js，el-table一定要加row-key
ZMJ_QQ的博客
06-09 1183
使用Sorttable.js实现el-table时，因为没有给el-table添加row-key，拖动排序不生效
el-table多选回显、翻页序号递增
大香蕉的博客
07-30 1431
实现要点： 1、多选回显： reserve-selection在type="selection"上定义，作用是保留之前选择的数据（也就是表格翻页选择项不丢失）； selection-change事件，当选择项发生变化会触发此事件； row-key：reserve-selection 功能的情况下，该属性是必填的； this.$refs.singleTable.toggleRowSelection(row,true)控...
element组件踩坑记录
wxiao_xiao_miao的博客
09-18 2363
解决方法：在获取表格数据的时候，使用组件提供的 toggleRowSelection 方法，切换某一行的选中状态，进行多选框的回显，此方法也可实现切换分页时的回显，需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据，不可使用传入的参数，否则方法会无效。解决方法：可以给el-table绑定row-key属性，用来优化 Table 的渲染；解决方法：给 el-table 绑定 key 值，在需要更新时 this.num++，触发 el-table 的重新渲染。
Element Table的row-class-name无效与动态高亮显示选中行背景色
10-17
主要介绍了Element Table的row-class-name无效与动态高亮显示选中行背景色，本文详细的介绍了解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图
01-08
需求效果图示例 / 日均销量 昨日累计销量
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
接下来，我们可以通过`el-table-column`来定义表格列。其中，`label`表示列标题，`width`用于设定列宽。例如，我们创建一个显示“日期”的列： ```html <el-table-column label="日期" width="180"> ``` 若想在...
elementui-table ssr
12-17
这个资源是为了解决elementui-table ssr渲染不生效的问题，执行npm i 和npm run dist 然后，将lib放到elementui的lib中
vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中
weixin_44867717的博客
03-29 1359
【代码】vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中。
element-ui 中 el-table 分页多选（记住上一页勾选数据）及编辑回显
grootbaby
09-07 3094
element-ui 的官网是有属性的。 el-table-colum 的reserve-selection属性 el-table 的row-key属性
el-table分页多选
qq_42461086的博客
06-14 2133
一、平时在做后端管理的项目中经常会遇到用户在列表分页里进行多选操作的情况，一般情况下切换到第N页，前一页选中的数据就没了，解决这个问题需要用到element ui自带的两个属性row-key和reserve-selection。2.需要注意的是要和属性“row-key”配合使用，使用了reserve-selection 之后，该属性是必填的。1.先在首行设置type="selection"实现复选框列，然后把 reserve-selection 属性设置为true，使数据更新后保留之前选中的数据。
树形表格 row-key问题
weixin_47382137的博客
06-07 389
el-table},
关于el-table的current-change
weixin_44707050的博客
02-07 7145
<el-table ref="settingTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" > <el-table-column type='index' label="序号" align='center'> </el-table-column> </el-table&...
Element UI表格组件技巧：如何简洁实现跨页勾选
zotall中拓
05-30 2221
elment ui表格实现跨页勾选 推荐解决方案：row-key、reserve-selection、@selection-change Element UI官网并没有提供直接的demo用于展示如何实现上述业务场景，但文档中却隐晦的表露出通过设置一些属性和方法是可以较为简洁的实现目标的。 基于table的两个属性row-key、reserve-selection和一个事件selection-change即可以非常简洁的实现。 (一)给el-table绑定row-key属性 row-key属性实际的作用是标识
【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
Sabrina_cc的博客
08-01 1万+
对于el-table自带展开行，功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。 希望：对于每次展开行的操作，操作之后该行继续展开。...
Vue中el-tableb表格高亮、取消高亮、表格多选、表格分页多选、禁用某行、选择当前行
milk_tiger的博客
06-02 3063
el-tableb表格高亮、取消高亮、表格多选、表格分页多选、禁用某行、选择当前行
使用 element table组件的row-key是报错 Duplicate keys detected: '1795641712488611840'. This may cause an update error.
最新发布
06-07
element table组件的row-key用于指定每一行的唯一标识符。当数据源中有重复的row-key时，就会报错“Duplicate keys detected: 'XXX'”。这是因为在表格渲染时，Vue.js会根据row-key来唯一标识每一行，如果有重复的row-key，就会导致渲染错误。 解决方法是确保数据源中每个row-key都是唯一的。你可以通过修改数据源来解决这个问题，或者通过设置其他的唯一标识符来替代row-key。例如，你可以将row-key设置为数据源中每行的id属性。 如果你的数据源中确实存在重复的row-key，你可以考虑使用索引来代替row-key。同时，你也可以在element table组件上设置属性`highlight-current-row`来高亮当前行，而不是依赖于row-key。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值