#vue refers to the operation of clearing the form when element-plus | reset the form | this.$refs[name].resetFields(); invalid approach
Very detailed! Impossible not to succeed!
Now there is such a function:
When you finish writing the form content and click Save, you need to save and clear the input content of the form. Clicking Cancel also clears the content.
Interface: form effect of element-plus
Element-plus clears the form steps:
If your this.$refs[formname].resetFields() fails, check the following steps back and forth to check for gaps.
1. When using element-plus, the ref attribute must be specified on the el-form tag, and the model must be bound, and the two must be consistent.
Who is bound?
When we add the address, we must take the content of the form form as a whole, and each form content must be pushed into an array. Therefore, there must be an object in the data layer, which represents each piece of data in this form, and the input content is a certain attribute of this object. It is this form object that is bound.
In this example, add_addresstaa represents each piece of data in the form, just bind it. The total array is
address_list:[]。
2. Now you can find this form through this.$refs.add_address. If you want to clear the form, you must add <el-form-item></el-form-item>a prop attribute to each item of the form, that is, each item, and the value of the prop attribute must match the value of the v-model in this item.
For example: each v-model must be bound to an item of obj. The v-modle of the name el-form-itemtag is add_address.name, then the value of prop must be name. And so on for each item.
Only elements with a prop attribute added to form-item will be considered to belong to this form.
3. Clear the form code:
this.$refs["表单名"].resetFields();
Encapsulated into a function:
//methods里
clear(formname){
this.$refs[formname].resetFields();
},
Call function: the passed value must be in the form of a string
//数据层调用
this.clear("add_address")
//视图层调用
<el-button @click="clear('add_address')">取消</el-button>
//注意外面有双引号里面就不能用双引号了，用单引号。
4. If you need to clear multiple forms:
this.$refs['form1','form2','form3'].resetFields();
//form1，form2，form3代表多个表单的ref。
Code for this example:
<!-- 添加地址表单 -->
<!-- 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>