今天在使用element-ui中的el-dialog的时候遇到了个这样的问题:页面上点击添加的按钮,弹出el-dialog对话框,该对话框中有个添加表单的子组件,然后填写值进行保存,点击保存按钮之后,el-dialog框关闭。继续点击添加的按钮,el-dialog框继续弹出,但是上次填写的表单内容没有清空。 图如下: 大致就是图上的意思。 实现思路 ...
问题:使用Vue Element-UI dialog嵌套表单,新增和编辑公用一个表单;先点击编辑后打开弹窗,关掉弹窗,点击新增,发现form表单没有清空 原因: (1)resetFields()只是重置为初始值 (2)这个初始值是在form的生命周期函数mounted被调用的时候赋值上去的 解决办法: 点击编辑的时候:把请求回显的数据放到this.$nextTick(() =>...
关闭element UI的弹窗,再次打开显示表单验证提示 打开弹窗,没有填写任何信息,点击保存按钮,触发了表单的验证提示,没有进行任何操作,点击【关闭按钮】或者【取消按钮】关闭弹窗,再次打开弹窗,仍然显示表单的验证提示信息, 解决方法 给el-dialog添加@close事件,给取消按钮添加点击事件,在事件中对表单进行重置操作,即可解决 ...
1. 此方法有效,但是如果打开修改弹框后再添加,确认添加后会多一个打开弹框时的 id 字段。 //打开弹框清空表单,并将数据保存到弹框中的 addForm 中 <el-dialog :title="dialogTitle" :visible.sync="isDialog" width="620px" v-if="isDialog"> <el-form :inline="true" :model="addForm" :rules="r...
关于检验清空的问题出现的原因是:我们在每次新增数据的时候,尽管数据可能都是必填的,但是我们一打开弹窗的时候,还是希望没有检验的,当我们change的时候,再进行数据的检验。而由于我们大部分的时候,编辑的弹窗和新增的弹窗都是同一个,这导致我们在操作完编辑弹窗,在点击新增弹窗的时候,发现数据都进行了检验,其实这个时...
elementui Dialog对话框第二次打开时有一些数据本来是没有但是显示的是上一次的数 elementui遇到的问题,一、form下面只有一个input时回车键刷新页面 原因是:触发了表单默认的提交行为,给el-form加上@submit.native.prevent就行了。<el-forminline@su
问题二:点击编辑之后再点击添加,添加表单中也会出现部门详情数据 原因是关闭弹窗时,子组件被没有销毁,它只是隐藏了,也没有清空里面表单的数据 我们先来看问题一数据不更新 问题一:回显数据不更新 解决方案一:在父组件中,给父组件中的el-dialog添加destroy-on-close属性 ...
1、查阅elementUI的文档发现,表单重置的为data中设置的初始值; 2、那我们就再编辑回填数据之前调用resetFields不就完美解决了嘛(机智如我)! 3、编辑时,直接调用编辑中的init方法,并在其中添加resetFields重置方法,发现第一次加载的时候报错, 说明再弹框显示时,表单实例还没加载完,不能调用resetFields方法; ...
添加新数据时加了重置方法,但是点击调用resetFields(),再次编辑数据无法写入input中。查看Form 表单用法发现resetFields()对整个表单进行重置,将所有字段值重置为初始值并移除校验结果没有追溯到底层代码,这里还需要再次研究,如果又小伙伴知道,麻烦指导下。 Form Methods ...