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>

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