element-ui 解析新增和编辑。里面点击按钮上的click事件为什么要那样写?

本文详细解释了在使用Element UI时,为何在新增表单中需要重新定义model值以确保初始化为空,以及在编辑时如何通过Object.assign()方法复制当前行数据到编辑表单。同时强调了表单字段名与表格字段的一致性,以及在不同场景下如何正确清空表单数据的方法,包括利用$nextTick解决新增时的清空问题。
摘要由CSDN通过智能技术生成

 

1.首先新增页面我们把定义的新增要填的表单绑定的model值全部又写了一遍,和上面data里面定义的格式是一样的,为什么呢?是多此一举吗?

当然不是。因为每次点击弹窗新增的表单都必须是置空的。而我们从新写了一遍定义时的数据相当于把他置空了。

 

2.编辑的时候怎么保证打开的页面直接显示的就是当前行的数据呢?这样靠this.editForm = Object.assign({}, row);这句代码。意思是:)//复制一个对象。就是把当前行的内容作为对象都复制出来给了this.editForm。当前定义的editForm的data一定要看着那个table定义的字段的名字(就是上面那个affairtypes数组)来哦。否则可能是不显示了。

3.注意新增和编辑时定义的model绑定的字段的名字。最好是和那个table里面对应的字段名字写的一样的。这样就不用再转换了

 

4.新增的表格提交了以后要清空数据。点击新增的时候清空一下。提交成功以后清空一下。不成功不要清空,因为你报错了他可能就修改好了在提交的。

上面写了点击新增时的清空,下面介绍提交后的清空。

this.$refs['editForm'].resetFields();  这个是清空ref=&

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值