Dialog 模态框中有个 Form 表单子组件,每次新增和编辑都会使用该组件,现在的问题是完成一次新增/编辑操作之后,再次打开 Dialog 模态框的时候,表单中还残留着上一次填写的数据。
解决方案:
在关闭 Dialog 模态框的时候清空一下表单验证就可以了,正常情况下是这样的
- <!--添加/编辑 用户弹窗-->
- <el-dialog :title="dialogTitle" :visible.sync="userDialog" width="460px" @close="closeDialog('userRuleForm')" class="DialogForm">
- <el-form :model="userRuleForm" :rules="userRules" ref="userRuleForm" label-width="105px" size="small">
- <el-form-item label="用户名称 :" prop="account">
- <el-input type="text" v-model="userRuleForm.account"></el-input>
- </el-form-item>
- <el-form-item label="用户描述 :" prop="description">
- <el-input type="textarea" v-model="userRuleForm.description"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer">
- <el-button size="small" type="primary" @click="addUserForm('userRuleForm')">确定</el-button>
- </div>
- </el-dialog>
- // 关闭 Modal 执行
- closeDialog(formName) {
- this.$refs[formName].resetFields();
- this.userRuleForm.account = '';
- this.userRuleForm.description = '';
- }
但是有些时候你的 Form 表单中有 Select 组件,Select 组件是通过 change 来验证数据是否被修改,在第二次打开弹框及以后,每次打开 Dialog 模态框,什么都没做,它就自动验证了,这个时候你需要在 Dialog 上面添加 v-if = 'deviceDialog' ,这样 Dialog 关闭的时候把 Form 表单销毁
- <!--添加/编辑 设备弹窗-->
- <el-dialog :title="dialogTitle" :visible.sync="deviceDialog" width="460px" @close="closeDialog('deviceRuleForm')" v-if="deviceDialog" class="DialogForm">
- <el-form :model="deviceRuleForm" :rules="deviceRules" ref="deviceRuleForm" label-width="105px" size="small">
- <el-form-item label="设备名称 :" prop="name">
- <el-input v-model="deviceRuleForm.name"></el-input>
- </el-form-item>
- <el-form-item label="设备编码 :" prop="code">
- <el-input v-model="deviceRuleForm.code"></el-input>
- </el-form-item>
- <el-form-item label="设备类型 :" prop="type">
- <el-select v-model="deviceRuleForm.type" placeholder="请选择设备类型">
- <el-option label="摄像头" value="1"></el-option>
- <el-option label="门禁" value="2"></el-option>
- <el-option label="其它类型" value="10"></el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <div slot="footer">
- <el-button size="small" type="primary" @click="addDeviceForm('deviceRuleForm')">确定</el-button>
- </div>
- </el-dialog>
- // 关闭 Modal 执行
- closeDialog(formName) {
- this.deviceDialog = false;
- this.deviceRuleForm.name = '';
- this.deviceRuleForm.code = '';
- this.deviceRuleForm.type = '';
- this.$refs[formName].resetFields();
- }
以上解决方案是根据我的实际情况来解决的,方法仅供参考!
博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~
继续阅读
评论