给表单添加ref属性
表单项el-form-item要添加prop属性，prop属性需要与input框绑定数据的最后名称一致，如v-model=“form.username”, prop则应该为 prop=“username”
通过this.$refs.xxx.resetFields(); 此处xxx为form内ref属性起的名字

 
 
前段时间在租个后台的项目，有两处需要一键清空表单数据
 
 
一、表单筛选后，需要可以一键清空或者恢复初始化筛选条件
 
 
初始化查询数据：
 
user Form Search：{
	username:null，
	showname:null,
	status:null
}
 
1.在created钩子深拷贝了一份数据模板：
 
 
这个时候this.defaultUserFormSearch已经是this.userFormSearch没改变之前的一个备份
 
2.在清空按钮事件触发后，再将备份的数据this.defaultUserFormSearch赋给this.userFormSearch
 
注意：这里一定还要是深拷贝，
 
this.userFormSearch = this.defaultUserFormSearch;(这种做法是错误的); 如果清空的时候不深拷贝备份的数据this.defaultUserFormSearch，那么this.defaultUserFormSearch将会和this.userFormSearch关联上，
 
后面清空之后修改了this.userFormSearch会牵扯到this.defaultUserFormSearch也被修改，再去清空就会有问题
 
 
我们每个页面查询条件都很多，这里只是拿了最少的一个举例子，如果查询条件更多，我们清空的当然也可以采用下面的方式，
 这种方式也可以，只不过当里面项目比较多的时候，我们也要写好多代码
 
 或者我们直接把this.userFormSearch = {}，我们status如果有默认值，那么这种暴力清除的方式也是不可以用的
 
二、我们编辑弹窗，取消后或者关闭后，同样可以采用这种办法来清空哦。
 
欢迎看到的同学或者前辈吐槽，或者告诉我还有更好的办法~

关闭弹出框时，想要清空里面的form表单数据
 
this.$refs['form'].resetFields()
 
但是再次点开时发现只清空了一部分，检查后发现在写form-item时漏掉了prop，如下：
 
<el-form-item label="主题描述" prop="themeDesc" class="input-item">

vue 添加和编辑用同一个表单，el-form表单提交后清空表单数据
 
在项目中做联系人的添加和编辑功能，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据，接下来是解决方法了，嘿嘿
 
首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据，页面不会有之前的数据存在，也不会出现验证信息在页面上。
 
 1. 在父级页面调用子级弹框表单组件(AddEdit.vue)
 
 <!-- form是子组件的form表单数据，meg是子组件弹窗的标题（添加或者编辑） -->
 <!-- <add-edit :msg.sync="msg" v-if='msg' :form='form'></add-edit> -->
  <!-- 没有使用v-if 是因为频繁点击编辑和新增的话，性能方面不是很好-->
<template>
	<el-button @click='addClick'>添加</el-button>
	<el-button @click='editClick(scope.row)'>编辑</el-button>
	<!-- 子组件弹窗 -->
	<add-edit :msg.sync="msg" :form='formData'></add-edit>
</template>
<script>
export default {
	data() {
		return {
			formData: {}
		}
	},
	
	methods: {
		addClick() {
		//需要将子组件需要的对象属性传过去，这一步必须得有，这样在子组件才可以清空表单
			this.formData = {
				name: '',
				email: '',
				phone: ''
			}
			this.msg = '添加'
		},
		
		editClick(row) {
			this.formData = row;
			this.msg = '编辑'
		}
	}
}
</script>
 
2. 点击父级页面的编辑按钮，将人员信息传递给AddEdit.vue
 
<template>
  <el-dialog :visible.sync="isShow" width="500px" class="edit-contact" :before-close="closeDialog">
    <span slot="title">{{msg}}联系人</span>
    <el-form :model="form" ref="ruleForm" label-width="100px" :rules="rules" size="small">
      <el-form-item :label="it.label" :prop="it.prop" v-for="it in formLabel" :key="it.prop">
        <el-input v-model="form[it.prop]" :placeholder="`请输入${it.label}`"></el-input>
      </el-form-item>
    </el-form>
    <div class="base-btn-action">
      <el-button size="small" type="primary" @click="saveContact">{{form.id?'编辑':'添加'}}</el-button>
      <el-button size="small" @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    msg: {
      //“添加”或者“编辑”
      type: String,
      default: ""
    },
    form: {
    //接收父组件传过来得对象数据
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formLabel: [
        { label: "姓名", prop: "name" },
        { label: "邮箱", prop: "email" },
        { label: "联系方式", prop: "phone" }
      ],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "change" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] }
        ],
        phone: [
          { required: true,  message: "请输入手机号", trigger: "change" }
        ]
      }
    };
  },
  computed: {
  //通过props的数据msg的值是否为空来判断弹框显示与否
    isShow() {
      return this.msg === "" ? false : true;
    }
  },
  watch: {
 	//监听子组件弹窗是否打开
	  msg(n) {
	  	//子组件打开得情况
	      if (n !== '') {
	        if (!this.$refs.ruleForm) {
	        //初次打开子组件弹窗的时候，form表单dom元素还没加载成功，需要异步获取
	          this.$nextTick(() => {
	            this.$refs.ruleForm.resetFields() // 去除验证
	          })
	        } else {
	        //再次打开子组件弹窗，子组件弹窗的form表单dom元素已经加载好了，不需要异步获取
	          this.$refs.ruleForm.resetFields() // 去除验证
	        }
	      }
	    },
  },
  methods: {
    closeDialog() {
      this.$emit("update:msg", "");
      setTimeout(() => {
      //关闭弹窗的时候表单也重置为初始值并移除校验结果
        this.$refs.ruleForm.resetFields();
      }, 200);
    }
  }
};
</script>
 
好了，问题解决了，在此记录一下，以后可以翻回来再看看