element form表单的必填和重置事件不生效的问题

最新推荐文章于 2023-11-03 23:18:29 发布

周亚鑫

最新推荐文章于 2023-11-03 23:18:29 发布

阅读量555

点赞数 5

文章标签： vue.js vue

本文链接：https://blog.csdn.net/q4717529/article/details/116782142

版权

本文详细介绍了在使用Element UI库构建表单时，prop属性对于表单验证和重置功能的重要性。通过实例展示了如何正确配置prop属性以确保表单项的必填选项生效以及重置功能正常工作。忽视prop属性可能导致表单功能缺失，如无法正确显示必填项的错误提示或重置操作失效。正确设置prop属性是确保表单组件与Vue数据模型绑定的关键。

摘要由CSDN通过智能技术生成

element表单在使用的时候可以配置验证规则必填选项和事件重置但是很多人都会忽略form表单使用的时候的细节用法从而导致某些功能实现不了其实就是表单项要有一个prop属性
例如

<el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="student.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="student.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="search">搜索</el-button>
          <el-button plain icon="el-icon-bottom-left" @click="resetForm('resetForm')">重置			</el-button>
        </el-form-item>
      </el-form>

data() {
		return {
			student: {
				name: '',
				mobile: ''
			}
		}
	},
	methods: {
		resetForm(form) {
	      this.$refs[form].resetFields();
	    }
	}

这种情况下的表单重置是不会生效的如果要生效就需要给每一个表单项写prop属性例如

<el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline">
        <el-form-item label="名称" prop="name">
          <el-input v-model="student.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="student.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="search">搜索</el-button>
          <el-button plain icon="el-icon-bottom-left" @click="resetForm('resetForm')">重置			</el-button>
        </el-form-item>
      </el-form>