取消或关闭dialog时清空el-form数据

1.添加关闭和取消的点击事件

// 关闭
<el-dialog
      title="添加:"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @close="resetForm('form')">
// 取消
<el-button @click="cancel()">取 消</el-button>

2.添加方法

  // 点击关闭时清空form表格的数据
    resetForm (form) {
      this.$refs[form].resetFields()
    }

  // 点击取消时关闭dialog并且清空form表格的数据
    cancel () {
      // 重置form表单
      this.$refs['form'].resetFields()
      // 关闭dialog
      this.dialogFormVisible = false
    }
   

注意： 当this.$refs[form].resetFields()无效时，考虑是否给el-form设置了ref属性，el-form-item设置了prop属性

 // 设置ref属性
<el-form :model="form" ref="form"></el-form>

//  设置prop属性
<el-form-item label="标题：" prop="title">