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就可以找到此表单了。如果要清空表单的话，必须给表单的每个项，也就是每个添加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.$refs['form1','form2','form3'].resetFields();
//form1，form2，form3代表多个表单的ref。

本例代码：

<el-form ref="add_address" :model="add_address" label-width="120px">
    <h5>{{add_address.title}}h5>
    
    <el-form-item label="姓名" prop="name">
        <el-input v-model="add_address.name" >el-input>
    el-form-item>
    <el-form-item label="电话" prop="tel">
        <el-input v-model="add_address.tel" >el-input>
    el-form-item>
    <el-form-item label="省市区" prop="selectedOptions">
        <el-cascader  :options='options' v-model='add_address.selectedOptions' @change='addressChange'>el-cascader>
    el-form-item>
    <el-form-item label="详细地址" prop="detailaddress">
        <el-input v-model="add_address.detailaddress" >el-input>
    el-form-item>
    <el-form-item>
        
        <el-button type="primary" @click="onSubmit">保存el-button>
        <el-button @click="clear('add_address')">取消el-button>
        
    el-form-item>
el-form>


<script>
    //data层
    data(){
      return{
        address_list:[],
        add_address:{
		  title:'添加地址',
          name:'',
          tel:'',
		  // selectedOptions: "请选择", //选择区域
		  selectedOptions:['110000', '110100', '110101'],  //或者这里给一个默认省市区
		  addressText:'北京市市辖区东城区',   //省市区，另设addressText显示。
          detailaddress:'',
		  isDefault:"", //此地址是否默认  
          addr_id:null
        },
		options: regionData,
		
			
      }
    },
    methods:{
		//3.清空表单函数
		clear(formname){
			this.$refs[formname].resetFields(); //此时传值应是字符串  this.clear("add_address")
		},
    }
script>