8-Vue中使用elment的el-dialog，关闭对话框清除表单信息

      用Vue做增删改查的简单页面操作，点击新增按钮弹出对话框，以form表单的形式展现，在输入框中填写信息确定提交，但第二次点击后总会有上次的信息存在，所以关闭弹窗后，需要清除对话框中表单的所有信息

1.首先在div布局中放置button按钮

新建

2.编写弹窗 在div中即可，只要位于整体的大盒子中，位置好像都可以，可以引用elment-UI中写好的，只要对应上就行

注：默认中没有@close，所以需要单独写一个方法

 
          
            
              
                
              
              
                
              
              
                
              
            
            
              取 消
              确 定
            
          

3.在为@close命名方法closeDialog后，在methods中进行单独设置，对表单进行刷新即可

 methods: {
    /* 新建 */
    handleAdd() {
      this.dialogAdd = true
      this.addLable = {
        num: this.addLable.num,
        name: this.addLable.name,
        tel: this.addLable.tel
      }
    },
    /* 确定新建 */
    sumbitAdd() {
      this.tableData = this.tableData || []
      this.tableData.push({
        num: this.addLable.num,
        name: this.addLable.name,
        tel: this.addLable.tel
      })
      this.dialogAdd = false
    },
    /* 关闭新建清空表单 */
    closeDialog() {
      this.addLable = {}
    }
}

 附赠  “新增”  功能~~~  理清逻辑顺序，弹窗的增删改查就变简单了

只是简单的理解，若有错误还望谅解指正！