element-ui关于获取from表单项整个对象的方法，以及this.$refs[formName].resetFields()清除失效情况-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui关于获取from表单项整个对象的方法，以及this.$refs[formName].resetFields()清除失效情况。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

关于获取表单项整个对象的方法：

<el-form ref="form" :model="form" label-width="80px">
	<el-form-item label="账号" prop="input">
		<el-input v-model="form.input" autocomplete="off" />
	</el-form-item>
	<el-form-item label="上传头像">
		<el-upload action="" :on-change="changeHandle">
			<el-button size="small" type="primary">点击上传头像</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
	</el-form-item>
	<el-button type="success" @click="submitForm('form')">点击上传</el-button>
</el-form>

elementui获取form里面的所有内容,Vuejs,javascript,前端,开发语言
也就是表单验证时出现的几个坑：
第一：<el-form>表单绑定的动态属性，而不是v-model双向绑定
第二：<el-form-item>表单项是里面才是<el-input>输入框和单选之类。
第三：注意的是：表单需要：ref="form" :model="form" ，特别注意是表单项：prop="input"，必须是，绑定的对象from里面的属性值key；
也就是说，只要做表单验证，必须添加这这个prop属性值！！！！！

data() {
    return {
        form: {
            input: ''
        }
    };
},

表单验证：清空所有表单项

其实是将表单重置为初始数据。文章来源地址https://www.toymoban.com/news/detail-608564.html

submitForm(formName) {
   this.$refs[formName].validate((valid) => {
       if (valid) {
           this.$refs[formName].resetFields();//清空所有表单项
       } else {
           return false;
       }
   });
},