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

最新推荐文章于 2024-02-20 13:59:40 发布
原创 最新推荐文章于 2024-02-20 13:59:40 发布 · 235 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端

博客探讨了在Vue应用中，点击上传电子发票按钮后，表格数据动态更新的问题。当删除已识别成功的数据行时，由于缺少row-key导致显示异常。解决方案是在表格中添加row-key属性，并设置唯一标识，从而避免数据错乱。修复后，发票代码和发票号码能正确展示或转换为输入框。

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

vue2 - 实现elementUI表格组件table动态添加或删除行功能，表格列表动态新增/插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（支持接口懒加载、表格分页、复杂嵌套表格）
高级前端工程师
12-21 6759
vue2，element-ui，表格Table组件，el-table，动态表格，实现表格动态增加/删除/编辑表格行，带有校验规则，自定义表格增删改查，动态表格动态数据新增修改删除，表格可编辑单元格自定义数据化结构新增删除取消，动态数据表格，表格动态添加或删除行，查询重置新增编辑回显删除，行内编辑功能，vue2+Element ui动态生成表格，并实现内容可编辑，如何实现表格动态增加/删除/编辑表格行(带校验规则)，数据有分页，懒加载如何更新，嵌套带下级的表格如何更新，不调用api接口怎么更新数据，示例代码，
elementUI点击table表格的一条数据渲染到input输入框内
路飞船长的博客
08-05 2084
有的时候因为需求,需要把一些数据通过输入框或者选择框来进行查询和渲染,这个时候数据多肯定是不能展示出来的,所以需要做一个弹窗,这个弹窗是一个table表格点击选中之后就会把此条数据渲染到指定位置1.@keyup.space.native="sendmessage()"//这行代码是通过空格触发弹窗事件,加到自己的组件即可2.data中定义//弹框4.与表格绑定。......
vue + element-ui 删除表格数据可能引起的bug
qq_39196099的博客
01-07 653
开发环境 vue + element-ui 问题描述 当我们用到table表格组件功能的时候，通常会采用后端分页（默认了解后端分页），在做批量删除或者单行删除时候，如果我们在最后一页删除当前页的全部数据，删除成功后，会继续刷新页面，重新获取当前页的数据，这时候获取到数据会为空，可是我们是有数据的呀，只是当前页没有数据，因为删除成功后，数据总条数变少了，前端根据返回的total数据计算页码，页数也减1了，这时候出现没有当前页码的bug，而且当前页没有数据 解决思路 获取数据列表时候，根据返回的数据列表长度进行
解决el-table关于删除某一项时错位的问题
qq_20501625的博客
04-14 1364
发现问题 今天在做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 6962
方法一 添加两个方法@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 1万+
从总体上来说，数值仿真计算中采用的网格可以大致分为结构化网格和非结构化网格两大类。 本篇博客简单记录学习结构化网格与非结构化网格的定义及优缺点
ElementUI table表格组件实现双击编辑单元格失去焦点还原，支持多单元格
天天打码-16年老码农
02-20 2039
上源码：在表格模板中用scope.row.isFocus && focusLabelName=='姓名1控制多个单元格显示。在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态，失去焦点时还原表格显示。
vue+elementUI 复杂表单的验证、数据提交方案问题
12-03
总结来说，处理Vue+ElementUI中的复杂表单验证和数据提交，关键在于合理划分组件职责，利用Vue的响应式系统和Element UI的表单验证功能，以及Promise的异步处理能力，确保代码的可读性和可维护性。同时，对于自定义...
elementui 表单嵌套表格，并且验证表格中的文本框
JJ_Smilewang的博客
02-10 3681
最近遇到一个需求，可以动态添加、修改、删除表格，并且添加时要对文本框进行验证，这也算是常规需求，故整理记录，供人参考。
vue中删除选定列表中的记录
xiaoxiao1777的博客
05-04 1589
应用场景1： 删除列表中选中的记录 交互操作： 1.全部勾选或者取消全部勾选 这个函数的目的或者要做的时：改变列表数据数组中每一项的勾选标记属性，它取决于用户的操作，是否勾选上，传入才能决定，所以需要一个形参变量 selectAllUsers(isCheck){ this.users.forEach(user=>user.isCheck = isCheck) } for...
Vue结合Element-UI实现单元格编辑、删除等操作
学习和工作总结，共勉！
03-20 1万+
Element-ui的表格 链接地址：http://element-cn.eleme.io/#/zh-CN/component/table 操作一： 删除 在 组件中添加 @selection-change=“handleSelectionChange” 事件，并在el-table-column组件中添加类型为selection <div> <el-button ...
解决element-ui中，在表单中修改数据，表格的数据也跟着修改的问题
有问题可关注公众号：前端研究院 后台输入问题回复
03-24 1086
问题：在表单中修改数据，经常遇到表格的数据也跟着修改的问题，并且不管是不是按确定或取消按钮，表格的数据还是被修改了。 -部分代码如下： editRow(row: any): void { this.currentInfo = row; this.dialogVisible = true; this.title = '更新信息'; } -问题原因： this.currentInfo = row; 这段代码中，row是Object对象类型，如果直接赋值的话，就变成了.
element组件清除输入框数据失败
fly_wugui的博客
09-06 4042
在vue项目中使用element组件el-form 需要清空输入框内容 在使用组件上 this.$refs.自定义的ref名称.resetFields() 时 如果清除数据失败，请检查el-form-item 标签上是否添加了prop 属性和绑定的from属性 ； ...
element表格中的数据处理
unimpossibles的博客
04-17 1513
我们请求到的数据经常不是我们想要显示的最终结果，例如：我们想要显示的是XX年XX月XX日，但是返回的数据却是一串数字代替，或者我们想要显示“开“”关”，但是返回却是0,1。这种情况我们就需要对数据经行处理。用到表格的数据转换 formatter属性。 <el-table-column label="开关状态" prop="data.tatus" :formatter=FunctionTatu...
vue删除一个数组元素后影响了另一个数组
hy3528的博客
09-11 913
出现此问题的原因就是两个数组来源于同一个对象的指针引用，所以在对其中一个数组进行操作的时候，才会影响到另一个同源的数组 解决办法很简单，只要深拷贝一下 就可以消除 同源的影响 this.data= JSON.parse(JSON.stringify(res.data.obj)); ...
vue+elementUI中table 数据内容变化但视图不更新解决
oMangGuoBuDing1的专栏
05-20 1858
下面时根据后台回来的响应值 更新列表内容的方法，也是常用的更新列表数据的场景，之后用到可参考 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结合Element UI如何实现表格数据的删除操作
热门推荐
浮生离梦的博客
02-11 1万+
一、Element UI中表格数据的删除 在表格数据的删除按钮下，进行绑定删除事件，removeUserById()。在这个是事件中，传入当前项的id值，通过scope.row.id就可以获得当前项的id值，代码如下： <!-- 删除按钮 --> <el-button type="danger" icon="el-icon-delete" size="mini...
elementui table表格中添加input
最新发布
06-18
用户的需求是在ElementUI表格中动态添加输入框，并实现数据的绑定和验证。步骤：1.在表格列中使用`<el-input>`组件代替普通文本。2.通过作用域插槽（scopedslot）获取当前行数据，并绑定到输入框。3.动态添加行时，...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值