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

原创已于 2022-03-25 23:36:32 修改 · 5.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #element-plus #refsresetFields #清空表单重置表单 #resetFileds失效

于 2022-01-27 02:06:22 首次发布

vue3插件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue项目中使用Element-Plus时遇到表单重置功能失效的问题及其解决方案。详细步骤包括：1.确保el-form有ref属性并与model绑定一致；2.为表单每一项添加prop属性，与v-model对应；3.封装并调用reset表单函数。通过这些步骤，可以有效解决`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.$refs['form1','form2','form3'].resetFields();
//form1，form2，form3代表多个表单的ref。

本例代码：

<!-- 添加地址表单 -->
<!-- 1.form绑定ref和model,均为add_address对象 -->
<el-form ref="add_address" :model="add_address" label-width="120px">
    <h5>{{add_address.title}}</h5>
    <!-- 2.每个form-item都要prop属性和v-model一致 -->
    <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>
        <!-- 4.调用清空表单函数 -->
        <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>