element的el-form表单数据绑定或者回显后无法编辑修改

原创 已于 2023-03-07 10:11:09 修改 · 4k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #element #vue #vue.js

于 2021-05-10 09:42:43 首次发布
本文介绍了一种在JavaScript中实现表单数据深拷贝的方法。通过将原始表单数据转换为JSON字符串再解析回来的方式，确保了拷贝数据与原数据完全独立，避免了因引用导致的问题。

在赋值后加上如下代码：

this.formData = JSON.parse(JSON.stringify(this.formData));

this.formData是你的dom表单绑定的数据对象。

Element el-date-picker 表单校验和数据回显问题解决方法详解
pleaseprintf的博客
06-29 6033
在 Vue.js 开发中，使用 Element UI 组件库的 el-date-picker 组件可以方便地实现日期选择功能。然而，在表单校验和数据回显方面可能会遇到一些问题。本文将详细介绍如何解决 Element el-date-picker 组件在表单校验和数据回显过程中的常见问题。如果需要对 el-date-picker 进行更复杂的校验，可以自定义校验方法。data() {return {// 自定义禁用日期规则 return time . getTime() > Date . now();
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
最新发布
m0_73761441的博客
07-25 877
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
ElementUI el-input 设置数据无法修改
回忆在这里
02-28 2391
网上有一些方案，比如添加input、change之类的事件，调用强制更新this.$forceUpdate()，试过之后并没有解决问题，分析是因为本来el-input就已经是无法修改状态，input，change事件怎么触发呢？分析原因是在定义data数据初始化时候没有把原始的属性结构定义，AJAX返回结果后直接给form添加新的属性并赋值，虽然数据能显示，但是这样添加的属性不是响应式的，如果在模板或渲染函数中使用该属性，这个新的属性将无法触发组件重新渲染。
element,编辑表单的状态（可修改表单及不可修改表单）shj
爬楼梯的前端小白的博客
02-17 7556
不点编辑的时候 表单默认设置true 禁用,点了编辑后 表单禁用取消 可以修改账户的密码 再点确定之后 即回复第一张图状态
elementUI 设置input的只读或禁用的方法
01-21
只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。 禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=”edit”就可以了 PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content
element的el-form表单数据赋值回显后无法编辑修改
weixin_40765227的博客
04-17 2210
写完之后表单无法修改，怎么点击都没反应。使用$set赋值即可。
vue element-ui el-form组件无法编辑问题
weixin_42280449的博客
11-22 1571
不能用el-col标签单独包含el-form，这会导致el-form失效，组件无法编辑。
el-form表单获取数据怎么回显
07-27
- *2* [element的el-form表单数据赋值回显后无法编辑修改](https://blog.csdn.net/weixin_40765227/article/details/130194556)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4841
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
ElementUI中的el-select中多选回显数据后没法重新选择和更改
coldriversnow的专栏
02-25 3684
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107838848 上面已经实现在编辑时给v-model绑定的数组重新赋值，这样多选框能实现回显数据。 但是没法再次对下拉框的内容进行更改，去掉原来的或者勾选新的都不可以。 实现 原因 下拉框数据是循环别的接口得来的，因为数据层次太多，render函数没有自动更新，需手动强制刷新。
解决form表单内容不能编辑，不能更改问题
m0_65274248的博客
09-14 3049
解决form表单内容不能编辑，不能更改问题
el-form-item__error 无法修改样式
热门推荐
mineblogjw的博客
09-20 1万+
在使用element-ui组件库的时候经常需要修改原有样式，这时候就会有很多问题，无法修改样式，style加不上去等一系列问题。今天刚好又碰到了，随手记一笔，希望能帮助到有需要的。 因为拿到的页面是开始别人写过的，所以样式类，不敢动，担心造成其他未知的影响，所以想另外加一个style通过scoped控制我需要修改的样式保证只修改在当前文件（页面）。这样导致了我一直加不上style，审查元素也查不...
elementUI的表格赋了初始值后，后面动态改变不起作用
weixin_45397914的博客
10-12 320
elementUI 的高度绑定值，发现在data中赋了初始值，后面动态改变，在浏览器的devtool中可以看到值正确了，但是表格的高度却不改变，查找资料得知，height的初始值赋值为null后，能正确显示动态改变的高度值。 ...
elementUI form表单中输入框无法编辑问题
tfx19931128的博客
07-15 3958
解决方法 1.form表单绑定的变量对象没有定义具体的对象字段，导致在form表单内使用了新增的字段vue无法识别并同步更新，所以解决这个问题只需要把form表单内定义的字段变量在绑定对象中全部定义一遍即可，如图所示： ...
解决vue表单回显数据无法修改的问题
Crazy_GirlLL的博客
09-23 3824
前言：今天在做修改操作的时候遇到了一个问题，数据回显到修改表单之后，发现无法输入，也不能实现修改 项目环境：springboot+vue前后端分离 问题：修改操作数据回显无法输入值 一、问题截图 二、代码展示 编辑按钮 <el-button type="text" size="small" @click="updateWindow = true,editCustomer(scope.$index,scope.row,tableData)">编辑 点击编辑按钮后.
vue2+element表单数据联动无法赋值到表单上和无法重新修改编辑问题
qq_54407657的博客
11-06 1336
例：this.$set(this.ruleForm, 'finishTime', time)this.ruleForm:是data中定义的对象。'finishTime'：是定义的对象中的key。在方法后使用this.$forceUpdate()方法即可。time：是键值对的值value。使用this.$set(）方法即可。二、解决表单赋值后无法修改问题。一、解决显示赋值问题。
【vue】element form/input/select 组件 赋值后无法编辑的问题
Hypnotic0624的博客
12-08 2573
今天在使用element form组件时，想创建一个修改的dialog ，赋上当前值再修改传后台 开始代码如下 HTML部分： <el-dialog :visible.sync="updateDialogVisible" title="编辑任务" width="50%"> <el-form :model="updateForm" ref="updateForm"> <el-row> <el-form-item lab
element ui组件赋值后部分组件修改数值无效情况解决
weixin_42192467的博客
06-28 2761
在使用过程中发现el-input-number无法输入，在网上搜资料，最终找到解决办法是在el-input-number上绑定@change=”changeVal($event)”
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值