关于elementui中dialog关闭时重置表单

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