删除elementui表格中的数据引发的问题（文本展示信息变成了输入框）

最新推荐文章于 2024-02-20 13:59:40 发布
最新推荐文章于 2024-02-20 13:59:40 发布
阅读量219 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： elementui后台管理系统 js 文章标签： elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rong0914/article/details/118756097
博客探讨了在Vue应用中，点击上传电子发票按钮后，表格数据动态更新的问题。当删除已识别成功的数据行时，由于缺少row-key导致显示异常。解决方案是在表格中添加row-key属性，并设置唯一标识，从而避免数据错乱。修复后，发票代码和发票号码能正确展示或转换为输入框。

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

1.需求：点击上传电子发票按钮，电子发票明细中就会新增数据，发票号码和发票代码如果识别成功就展示文本信息，失败则变成输入框。
2.如果我删除了vue.png那条数据，第一条已经识别成功的数据，发票代码和发票号码就变成了输入框。我就没截图了。这种情况就是table少了行的key值导致的。如代码中添加row-key后就解决了,key值是随便取得名字
在这里插入图片描述
在这里插入图片描述

vue2 - 实现elementUI表格组件table动态添加或删除行功能，表格列表动态新增/插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（支持接口懒加载、表格分页、复杂嵌套表格）
高级前端工程师
12-21 6563
vue2，element-ui，表格Table组件，el-table，动态表格，实现表格动态增加/删除/编辑表格行，带有校验规则，自定义表格增删改查，动态表格动态数据新增修改删除，表格可编辑单元格自定义数据化结构新增删除取消，动态数据表格，表格动态添加或删除行，查询重置新增编辑回显删除，行内编辑功能，vue2+Element ui动态生成表格，并实现内容可编辑，如何实现表格动态增加/删除/编辑表格行(带校验规则)，数据有分页，懒加载如何更新，嵌套带下级的表格如何更新，不调用api接口怎么更新数据，示例代码，
Vue中Elementui表格内添加一个编辑按钮和删除按钮，并且实现点击编辑按钮使表格内数据可编辑，点击删除按钮删除该行
热门推荐
zjh_hhh的博客
04-12 1万+
- 这个是在工作中遇到的一个问题，需求大概就是表格里面添加一个按钮，然后点击按钮使当前行的表格数据可以编辑，就是变成input输入框，然后再点击按钮保存输入的数据。然后还有一个删除按钮，点击删除就删除该行 首先看一下效果图吧 然后点击编辑 编辑按钮变成保存按钮然后点击保存按钮，数据变为编辑后，删除按钮就不演示了，具体效果就是点击删除按钮之后有一个弹框出来提示是否确认删除，点击确认就删除，点击取消就返回 然后看代码吧 这是表格的html <template slot="d
vue + element-ui 删除表格数据可能引起的bug
qq_39196099的博客
01-07 629
开发环境 vue + element-ui 问题描述 当我们用到table表格组件功能的时候，通常会采用后端分页（默认了解后端分页），在做批量删除或者单行删除时候，如果我们在最后一页删除当前页的全部数据，删除成功后，会继续刷新页面，重新获取当前页的数据，这时候获取到数据会为空，可是我们是有数据的呀，只是当前页没有数据，因为删除成功后，数据总条数变少了，前端根据返回的total数据计算页码，页数也减1了，这时候出现没有当前页码的bug，而且当前页没有数据 解决思路 获取数据列表时候，根据返回的数据列表长度进行
解决el-table关于删除某一项时错位的问题
qq_20501625的博客
04-14 1325
发现问题 今天在做elementui的el-table时，出现了一个问题。详情： 我在点ggp那一行的删除时，删除的却是zc那一行。 分析问题 参照el-table示例，发现操作那一列没有设置prop属性，而其他的列设置了，怀疑是这里出了问题。 解决问题 删除其他列的prop属性，自定义显示表格的内容 贴代码 <el-table :data="scoreTable" style="width: 100%" size="medium" :
vue+elementUI el-table 点击表格的某一单元格变成输入框el-input
DcTbnk的博客
04-25 6867
方法一 添加两个方法@cell-click="tabClick" :row-class-name="tableRowClassName" 点击具体的单元格通过v-if="scope.row.index === tabClickIndex"判断 <el-table class="table" :data="dataList" @cell-click="tabClick" :row-class-name="tableRowClassName" :cell-class-name="tableCellClas
结构化网格与非结构化网格 学习记录
weixin_62592231的博客
10-11 9517
从总体上来说，数值仿真计算中采用的网格可以大致分为结构化网格和非结构化网格两大类。 本篇博客简单记录学习结构化网格与非结构化网格的定义及优缺点
ElementUI table表格组件实现双击编辑单元格失去焦点还原，支持多单元格
最新发布
天天打码-16年老码农
02-20 1923
上源码：在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示。在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态，失去焦点时还原表格显示。
vue+elementUI 复杂表单的验证、数据提交方案问题
12-03
总结来说，处理Vue+ElementUI中的复杂表单验证和数据提交，关键在于合理划分组件职责，利用Vue的响应式系统和Element UI的表单验证功能，以及Promise的异步处理能力，确保代码的可读性和可维护性。同时，对于自定义...
elementui 表单嵌套表格，并且验证表格中的文本框
JJ_Smilewang的博客
02-10 3443
最近遇到一个需求，可以动态添加、修改、删除表格，并且添加时要对文本框进行验证，这也算是常规需求，故整理记录，供人参考。
vue中删除选定列表中的记录
xiaoxiao1777的博客
05-04 1572
应用场景1： 删除列表中选中的记录 交互操作： 1.全部勾选或者取消全部勾选 这个函数的目的或者要做的时：改变列表数据数组中每一项的勾选标记属性，它取决于用户的操作，是否勾选上，传入才能决定，所以需要一个形参变量 selectAllUsers(isCheck){ this.users.forEach(user=>user.isCheck = isCheck) } for...
Vue结合Element-UI实现单元格编辑、删除等操作
学习和工作总结，共勉！
03-20 9909
Element-ui的表格 链接地址：http://element-cn.eleme.io/#/zh-CN/component/table 操作一： 删除 在 组件中添加 @selection-change=“handleSelectionChange” 事件，并在el-table-column组件中添加类型为selection <div> <el-button ...
表格中的数据删除。vue+element-ui
qq_42809973的博客
10-22 2463
以上便是我表格中删除数据写的东西.先记下来，嘿嘿
解决 “element分页：删除最后一页的所有数据后，currentPage显示正确，但列表内容为空” 的问题
qq_37471721的博客
09-12 8189
问题描述： 当表格有多页数据，并且末尾页只有一条数据时，删除末尾页的数据之后，数据列表为空，但是当前页码显示正确，如下图
使用element UI时，table表格插入input输入框后里面的内容无法编辑问题
bigbomb369的博客
07-05 3867
其实此处打的问题是内容已经被修改了，但是table表格因为没有更新数据，所以看起来像是没有修改成功 此处可以添加给对应的input标签添加@input=“onExchange（scope.$index）” <template slot-scope="scope> <el-input v-model="scope.row[item.prop]" @input="onExchange(scope.$index)" type="tex
vue+elementUI中table 数据内容变化但视图不更新解决
oMangGuoBuDing1的专栏
05-20 1830
下面时根据后台回来的响应值 更新列表内容的方法，也是常用的更新列表数据的场景，之后用到可参考 methods: { send(rowIndex, val) { const p = { index: this.index, param: val.param } send(p).then(res => { console.log('res.data', res.data) 修改数据值 const rowData =.
vue删除一个数组元素后影响了另一个数组
hy3528的博客
09-11 893
出现此问题的原因就是两个数组来源于同一个对象的指针引用，所以在对其中一个数组进行操作的时候，才会影响到另一个同源的数组 解决办法很简单，只要深拷贝一下 就可以消除 同源的影响 this.data= JSON.parse(JSON.stringify(res.data.obj)); ...
vue结合Element UI如何实现表格数据的删除操作
浮生离梦的博客
02-11 1万+
一、Element UI中表格数据的删除 在表格数据的删除按钮下，进行绑定删除事件，removeUserById()。在这个是事件中，传入当前项的id值，通过scope.row.id就可以获得当前项的id值，代码如下： <!-- 删除按钮 --> <el-button type="danger" icon="el-icon-delete" size="mini...
elementui表格自动换行
07-27
回答: 如果你想在Element UI表格中实现自动换行，你可以使用CSS的`word-break`属性来实现。你可以在表格的样式中添加以下代码：`<div style="word-break: break-all">`。这将强制在单元格内容过长时进行换行。\[1\]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值