elementplus2. vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效的做法

#vue引用element-plus时清空表单的操作|重置表单|this.$refs[name].resetFields()；失效的做法

非常详细！不可能不成功！

现在有这么一个功能：

当写完表单内容点击保存的时候需要保存并清空表单的输入内容。点击取消也要清除内容。

界面：element-plus的表单效果

element-plus清空表单步骤：

如果你的this.$refs[formname].resetFields()失效了，来来回回检查下面这几步查缺补漏。

1.在使用element-plus时就要在el-form标签上指定ref属性，并且必须绑定model,这俩要保持一致。

那绑定谁呢？

我们添加地址肯定是把form表单的内容作为一个整体，每一条表单内容都要push进一个数组里。所以data层肯定有一个对象，代表这个表单的每一条数据，输入的内容均为这个对象的某个属性。绑定的就是这个表单对象。

本例中add_addresstaa代表表单的每一条数据，绑定它即可。总数组是

address_list:[]。

2.此时通过this.$refs.add_address就可以找到此表单了。如果要清空表单的话，必须给表单的每个项，也就是每个<el-form-item></el-form-item>添加prop属性，并且prop属性的值必须要符合此项中的v-model的值。

例如：每个v-model肯定是要绑定obj的某一项的。姓名的el-form-item标签的v-modle为add_address.name，那么prop的值必须是name。以此类推每个项。

只有在form-item加了prop属性的元素才会被认为属于这个表单。

3.清空表单代码：

this.$refs["表单名"].resetFields();

封装成函数：

//methods里
clear(formname){
   
	this.$refs[formname].resetFields();
},

调用函数：传值必须是个字符串形式

//数据层调用
this.clear("add_address")

//视图层调用
<el-button @click="clear('add_address')">取消</el-button>
//注意外面有双引号里面就不能用双引号了，用单引号。

4.如果需要清空多个表单：

this