element ui 打开弹框表单校验问题

最新推荐文章于 2025-04-17 17:33:12 发布

_Lunay

最新推荐文章于 2025-04-17 17:33:12 发布

阅读量7.2k

点赞数 2

分类专栏： elementUi

本文链接：https://blog.youkuaiyun.com/z9061/article/details/93720106

版权

elementUi 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在关闭对话框时如何正确重置表单并清除验证状态，以避免下次打开对话框时出现验证错误的问题。通过使用Vue.js的resetFields方法，可以有效地解决这一常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <el-dialog
		  title="编辑"
		  :visible.sync="centerDialogVisible"
		  width="70%"
		  center
		  @close="closeDialog"
		  >
		  <div>
		  	<el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-width="145px" class=" demo-form-inline" :inline='true' >
  			<el-form-item label="是否在岗" prop="isOrganization" required>
		  				<el-radio-group v-model="ruleForm2.isOrganization" style="width: 260px;" >
		  				      <el-radio :label="0">在岗</el-radio>
		  				      <el-radio :label="1">不在岗</el-radio>
		  				</el-radio-group>
		  			</el-form-item>
                </el-form>
            </el-dialog>

	    methods: {
	    	closeDialog(){
	    		this.$refs.ruleForm2.resetFields()
	    	},
          }

主要原因是上次关闭弹框时未初始化表单未清除验证；故所在关闭弹框的时候resetFields一下