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

  • A+
所属分类:前端开发

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. }

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

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

发表评论

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