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

本文主要是介绍element form表单的必填和重置事件不生效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这种情况下重置事件就会生效的 如果发现标记必填项的 红色 ‘’ 出现不了也是该问题导致的

这篇关于element form表单的必填和重置事件不生效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---