解决 ElementUI 关闭 Dialog 模态框清除 Form 表单验证问题

Admin
Admin
Admin
52
文章
6
评论
2018年7月27日11:03:45 评论 53,780 2508字阅读8分21秒

Dialog 模态框中有个 Form 表单子组件,每次新增和编辑都会使用该组件,现在的问题是完成一次新增/编辑操作之后,再次打开 Dialog 模态框的时候,表单中还残留着上一次填写的数据。

解决方案:

在关闭 Dialog 模态框的时候清空一下表单验证就可以了,正常情况下是这样的

  1. <!--添加/编辑 用户弹窗-->
  2. <el-dialog :title="dialogTitle" :visible.sync="userDialog" width="460px" @close="closeDialog('userRuleForm')" class="DialogForm">
  3.     <el-form :model="userRuleForm" :rules="userRules" ref="userRuleForm" label-width="105px" size="small">
  4.         <el-form-item label="用户名称 :" prop="account">
  5.             <el-input type="text" v-model="userRuleForm.account"></el-input>
  6.         </el-form-item>
  7.         <el-form-item label="用户描述 :" prop="description">
  8.             <el-input type="textarea" v-model="userRuleForm.description"></el-input>
  9.         </el-form-item>
  10.     </el-form>
  11.     <div slot="footer">
  12.         <el-button size="small" type="primary" @click="addUserForm('userRuleForm')">确定</el-button>
  13.     </div>
  14. </el-dialog>
  15. // 关闭 Modal 执行
  16. closeDialog(formName) {
  17.     this.$refs[formName].resetFields();
  18.     this.userRuleForm.account = '';
  19.     this.userRuleForm.description = '';
  20. }

但是有些时候你的 Form 表单中有 Select 组件,Select 组件是通过 change 来验证数据是否被修改,在第二次打开弹框及以后,每次打开 Dialog 模态框,什么都没做,它就自动验证了,这个时候你需要在 Dialog 上面添加  v-if = 'deviceDialog' ,这样 Dialog 关闭的时候把 Form 表单销毁

  1. <!--添加/编辑 设备弹窗-->
  2. <el-dialog :title="dialogTitle" :visible.sync="deviceDialog" width="460px" @close="closeDialog('deviceRuleForm')" v-if="deviceDialog" class="DialogForm">
  3.     <el-form :model="deviceRuleForm" :rules="deviceRules" ref="deviceRuleForm" label-width="105px" size="small">
  4.         <el-form-item label="设备名称 :" prop="name">
  5.             <el-input v-model="deviceRuleForm.name"></el-input>
  6.         </el-form-item>
  7.         <el-form-item label="设备编码 :" prop="code">
  8.             <el-input v-model="deviceRuleForm.code"></el-input>
  9.         </el-form-item>
  10.         <el-form-item label="设备类型 :" prop="type">
  11.             <el-select v-model="deviceRuleForm.type" placeholder="请选择设备类型">
  12.                 <el-option label="摄像头" value="1"></el-option>
  13.                 <el-option label="门禁" value="2"></el-option>
  14.                 <el-option label="其它类型" value="10"></el-option>
  15.             </el-select>
  16.         </el-form-item>
  17.     </el-form>
  18.     <div slot="footer">
  19.       <el-button size="small" type="primary" @click="addDeviceForm('deviceRuleForm')">确定</el-button>
  20.     </div>
  21. </el-dialog>
  22. // 关闭 Modal 执行
  23. closeDialog(formName) {
  24.     this.deviceDialog = false;
  25.     this.deviceRuleForm.name = '';
  26.     this.deviceRuleForm.code = '';
  27.     this.deviceRuleForm.type = '';
  28.     this.$refs[formName].resetFields();
  29. }

以上解决方案是根据我的实际情况来解决的,方法仅供参考!

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年7月27日11:03:45
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: