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>

好了，问题解决了，在此记录一下，以后可以翻回来再看看

Vue+ElementUI表单Form重置resetFields()无法重置表单的问题
在使用ElementUI的from表单的重置时总是不行，无法通过this.$reds[formName].resetFields()清空表单数据
后来查找资料，看博客总结如下两种方法：
方法一
将form表单数据赋值为{}
this.form = {};

即可。
方法二
方法二是调用Form表单的resetFields()方法，比较繁琐
1. 给表单加别名
在<el-form>标签中加ref属性
<el-form ref="userForm" ...>
	......
</el-form>

2. form的每个item加prop属性（这里最坑）
form的每个item加prop属性，并且prop的名字需要和绑定的数据的名称一致，注意prop的属性是加到<form-item>标签上的
<el-form-item label="姓名" prop="name">
   <el-input v-model="form.name"></el-input>
</el-form-item>

3. 绑定点击事件中传入Form的ref名字
<el-form-item>
	<el-button @click="addCancel('userForm')">取消</el-button>
</el-form-item>

4. 注册点击事件
在methods中注册点击事件，再事件中调用resetFields()方法清空Form表单。
addCancel(formName) {
    this.$refs[formName].resetFields();
}

注意：要清空的地方必须绑定prop属性，并且和form中数据的最后的名字一致，否则不能清空

问题：

elementui在重置表单时，无法使用this.$refs[‘formRefVal’].resetFields()清空表单数据;
elementui 设置rules后没有效果

解决方法：

1、表单加ref属性
<el-form ref="refname"></el-form>

2、form的每个item加prop属性（踩了好久的坑这个,需要和绑定数据的最后名称一致，prop属性添加到form-item上）
<el-form-item prop="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>

3、绑定点击事件中传入refname
<el-form-item>
    <el-button @click="resetForm('refname')">清空</el-button>
</el-form-item>

4、注册事件
restForm(refname) {
   this.$refs[refname].resetFields()
}


5、检查是否有初始值

在data数据上需要挂载表单数据初始值为''

如果使用了$store.state.fm.plan管理关联表单数据，那么在form中需要添加:model="$store.state.fm"。

赶紧试试吧，可以的话记得点赞喽
文章转自：https://my.oschina.net/yxmBetter/blog/1535157

感谢作者：YXMBetter

问题：

elementui在重置表单时，无法使用this.$refs['formRefVal'].resetFields()清空表单数据;

elementui 设置rules后没有效果;

解决方法：

1、表单加ref属性

<el-form ref="refname"></el-form>


2、form的每个item加prop属性（踩了好久的坑这个,需要和绑定数据的最后名称一致，prop属性添加到form-item上）

<el-form-item prop="name">
    <el-input v-model="query.name"></el-input>
</el-form-item>


3、绑定点击事件中传入refname

<el-form-item>
    <el-button @click="resetForm('refname')">清空</el-button>
</el-form-item>


4、注册事件

restForm(refname) {
   this.$refs["refname"].resetFields()
}

+ 5、检查是否有初始值
在data数据上需要挂载表单数据初始值为''