ElementUI form表单在dialog中使用，先点击编辑后再点击新增，表单重置无效

最新推荐文章于 2023-06-25 18:51:15 发布

风~蒲公英

最新推荐文章于 2023-06-25 18:51:15 发布

阅读量1.3k

点赞数

分类专栏：前端h5 vue js 文章标签： elementui html javascript

本文链接：https://blog.csdn.net/weixin_44269229/article/details/120671202

版权

前端h5 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

在使用ElementUI构建动态表单时遇到一个问题，即在Dialog中修改数据时，form表单的resetFields()方法无法正确重置到初始状态。原因在于Dialog的内容懒加载导致表单值在加载时就被更新。为解决此问题，可以在Dialog上添加v-if，确保表单先渲染再赋值，利用this.$nextTick()确保数据正确重置。这样可以避免表单重置无效的问题。

摘要由CSDN通过智能技术生成

在用ElementUI做动态表单时，数据的修改都是打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现一个问题:

form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准; 
Dialog 中的内容是懒加载的，目前 edit (更新)方法的写法导致 Form 刚加载出来时值就已经是新的了，所以 resetFields 也只能回到新值

解决办法就是在dialog上面加一个v-if；

<el-dialog  :title="title"  
            :close-on-press-escape="false" 
            :close-on-click-modal="false" 
            :visible.sync="payfeeVisible" 
            v-if='payfeeVisible'
            width="430px">

让表单先渲染出来，再对表单对象进行赋值（this.$nextTick）
这样就可以避免重置无效的效果；