问题描述:在关闭el-dialog对话框后,再次打开dialog,表单依然显示上次的信息。
此篇主要记录解决关闭dialog时重置表单的方法
一、dialog中的一个重要事件(Events)
二、el-form中的一个重要方法
三、el-item-form中的一个重要属性
三、vue中的两个重要属性
ref:获取dom元素
v-model:实现数据双向绑定
四、实现过程
1.在el-dialog中添加属性和方法
<el-dialog
:visible.sync="add_dialog"
width="500px"
@close="closeAddDialog" //关闭对话框时调用的方法
>
2.在el-form中定义属性
<el-form ref="addRoleForm" :model="AddRoleList">
解释:ref用于定义当前DOM元素的名称,后续可用$refs获取该DOM元素
:model用与绑定表单数据,重置表单数据
3.在el-item-form中定义属性
<el-form-item label="名称" prop="name">
<el-input
style="width: 370px"
v-model="AddRoleList.name"
></el-input>
</el-form-item>
重要:prop属性必写!!!!
4. 编写close方法
//清除对话框中的数据
closeAddDialog() {
this.add_dialog = false //关闭对话框
this.$refs.addRoleForm.resetFields(); //重置表单
},