最近在寫增刪改查，在新增的時候要彈出對話方塊填寫form表單資訊，發現對話方塊右上角的小X和右下角的取消不是一個事件，我想在點選它們兩個的時候都可以重置表單，最終解決，如下。

vue：

<el-dialog 
:title="titleName[dialogStatus]" 
:visible.sync="dialogFormVisible" 
@close="closeDialog" 
:close-on-click-modal="false">
    <el-form :model="form" :rules="rules" ref="form">
        ...
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm('formb')">取消</el-button>
        <el-button type="primary" @click="submitForm('formb')" v-show="save">儲存</el-button>
    </div>
</el-dialog>
 

js：

export default{
    data() {
        form: {
        }
    },
    methods:{
        // 對話方塊取消事件
        closeFrom(formName){
            this.dialogFormVisible = false;
            // 點選取消 資料重置
            this.$refs[formName].resetFields();
        },
        // 對話方塊關閉事件
        closeDialog(){
            // 點選關閉 資料重置
            this.$refs['form'].resetFields();
        }
    }
}