淘先锋技术网

首页 1 2 3 4 5 6 7

问题描述:在关闭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();        //重置表单
    },