Element UI库 之 el-input 赋值后不能删除，修改，输入

于 2023-10-13 16:07:01 发布
阅读量1.7k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39650528/article/details/133812650
版权

最近做了一个需求就是导入数据的， 导入了之后发现打折跟促销价都发不能修改了， 甚至删除都不行。后面去查了下发现大概是数据响应的问题。大概的解决办法有下面几个，我是用最后一个解决的

方法一：强制更新

在绑定@input里面的调用this.$forceUpdate();

方法二：深拷贝数据

JSON.parse(JSON.stringify());

方法三：使用this.$set

this.$set(item, 'goods_discount', item.discount)

系咩
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
1. **Element UI的`el-table`组件**：这是一个强大的表格组件，它支持多种功能，如行选中、排序、自定义列模板等。在示例中，通过`:data`属性绑定数据源，`highlight-current-row`属性使选中行高亮，`@selection-...
element-ui tree结构实现增删改自定义功能代码
10-14
Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的场景中，我们需要在Tree组件的基础上增加编辑、删除和新增节点的功能。 首先，...
element ui watch el-input赋值之后无法删除或修改
emmmmmmm__的博客
11-29 1925
今天在开发过程中偶然返现这个小问题：watch监听父组件传过来的值并给el-input赋值 之后发现无法修改input得值 需要在input里添加 @input="change($event)"然后在methods里写上以下方法就ok了。
Vue + ElementUI el-input无法输入、修改、删除的问题
SunshineGGB的博客
12-29 6232
vue强制更新vm.$forceUpdate()，vue+elementui保存数据后信息框数据无法更新删除的问题
[element-ui] el-input 不能正常输入，输入了也不能删除的问题
qq_14993591的博客
06-27 1860
el-input element 输入框 input 不能正常输入，输入了也不能删除的问题
ElementUI el-input无法输入、修改、删除问题解决
热门推荐
weixin_52394141的博客
12-01 1万+
使用 el-input 这个标签时，我有些情况下在 el-input 是无法输入的，绑定的值动也动不了，删也删不掉，改也改不了，所以我做了以下的解决方法的统计，希望可以帮助到大家！造成的结果就是从后端传来的数据只能显示在输入框中，不能改也不能删，所以大家也可以考虑一下这个情况，当然表单的数据最好也不要使用this，虽然不知道原理，但是问题确实出在this上，知道的友友请在评论区分享哦~3.我们有些时候可能会忘记加入v-model属性，来绑定输入框中的值，如果忘记加入了，记得补上。
el-input、el-select初始赋值后无法编辑删除问题
Giraffe0615的博客
05-19 858
主要是获取不到DOM原因。
el-input有时候添加不了有时候删不了
最新发布
weixin_43923808的博客
09-15 576
【代码】el-input有时候添加不了有时候删不了。
element-ui el-input输入框赋值后不能编辑
Mr_2612757的博客
09-12 1560
el-input v-model="ruleForm.concernMember" placeholder="请输入关注人erp"></el-input>方案二：在给input赋值时，使用this.$set。方案一：在data中给input的值赋一个初始值。
【解决Vue中el-input输入框无法编辑的问题】
qq_45278500的博客
12-07 4450
解决Vue项目中el-input标签无法编辑的问题
ElementUI 销毁Dialog中带富文本编辑器的内容缓存
TomPig_1024
10-12 664
项目场景： Vue-ElementUI项目 问题描述： 在项目中使用dialog组件并且组件中使用Tinymce编辑器，发现创建一个表单提交成功后，不刷新页面，再次点击后Tinymce编辑器会携带缓存内容 解决方案： 搞东搞西搞死清除不掉，就直接v-if暴力删除元素 <el-dialog @close="resetForm('addForm')" title="难搞啊" v-if="addDialogFormVisible" :
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能强大的界面。然而，在实际应用中，尤其是在表格中嵌入表单元素并进行数据验证时，会遇到一些挑战。...
前端小工具 - js模拟键盘、鼠标事件给element form批量赋值
06-24
在Element UI的场景下，批量赋值可能涉及到组件如`el-input`、`el-select`等。Element UI提供了一些自定义方法，如`$refs`访问子组件并调用其方法来设置值。例如，对于`el-input`，可以直接修改`value`属性，或者...
【JavaScript源代码】总结Vue Element UI使用中遇到的问题.docx
12-29
在使用Vue Element UI框架进行开发时，我们可能会遇到各种各样的问题。以下是对这些问题的详细解答： 1. **DateTimePicker 日期选择范围为当前时间以及当前时间之前**： 当我们需要限制用户只能选择当前时间及之前...
element el-input输入框绑定值无法修改原因
weixin_55798503的博客
09-16 2681
大家多多指教
ElementUi的输入框Input内部设置固定前缀字符串，不能删除
03-23 3178
我要实现的效果是：在输入框内部实现固定的前缀字符串其实官方文章里面有给定插槽，但是那种插槽并不能满足我的需求，先看官方的：通过官方给的例子，我们可以看到prepend和append插槽使用：prefix和suffix的效果：可以看到和我们要的效果完全不符，所以我就要实现自定义的效果了。
input框末尾增加默认字段，不可删除，不可在默认字段后添加内容。
weixin_52053311的博客
08-22 420
onDeleteKeyDown:当删除内容时判断删除的是否是默认字段，是的话就禁止删除。onCompositionStart：输入法中文状态下记录输入前文字的内容。compositionend：输入法中文状态下判断是否对默认字段进行操作。onKeyDown：如果在默认字段中间或者后边操作，则输入失败。
el-input给了默认值不能删除
任立伟的博客
11-01 1779
这样写即可解决
element ui input 深层循环v-model绑定默认数据删除不了的情况
smile的博客
07-25 1729
给input一个@input方法 使其更新视图，这样子就可以正常编辑删除了。出现这种情况是vue不能检测到对象属性的添加或者删除导致视图无法更新。在项目开发中遇到的，简单记录一下。
vue+js+element-ui,el-input文本框最多10行，每一行只能输入10个字，写的深入一点
06-13
好的，让我详细解释一下如何实现这个需求。 首先，我们需要使用 Element UI 中的 `el-input` 组件。针对文本框最多10行的要求，我们可以通过设置 `rows` 属性来控制文本框的行数。而每一行只能输入10个字的要求，则需要通过 JS 来实现。 我们可以通过监听文本框的输入事件 `input`，在事件处理函数中获取文本框中的值，然后判断其长度是否超过10个字符。如果超过，则截取前10个字符并重新赋值给文本框。这样就可以保证每一行只能输入10个字了。 下面是示例代码： ``` <template> <el-input type="textarea" :rows="10" @input="handleInput" v-model="value" ></el-input> </template> <script> export default { data() { return { value: '', } }, methods: { handleInput(event) { const inputValue = event.target.value const lines = inputValue.split('\n') const maxLength = 10 let result = '' for (let i = 0; i < lines.length; i++) { const line = lines[i].substring(0, maxLength) if (i === lines.length - 1) { result += line } else { result += line + '\n' } } this.value = result }, }, } </script> ``` 在上面的代码中，我们通过 `split` 方法将输入的值按行分割，然后针对每一行进行截取。最后将处理后的值重新赋值给 `value`，即可实现每一行只能输入10个字的效果。 希望这个解答能够对你有所帮助。如果还有什么不明白的地方，可以随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值