vue + ElementUI 关闭/取消对话框时清除form表单

要求：在点击x和点击取消时，清空form表单

1、点击x时，清空form表单

解决方法：需要用到dialog组件的before-close属性

 <el-dialog title="新增专家信息" :visible.sync="addExpertInfo" :before-close="closeExpertFormDialog">

 

 //关闭dialog前
    closeExpertFormDialog(done){
      this.$refs["addExpert"].resetFields();
      done();//done 用于关闭 Dialog
    },

注意： this.$refs["addExpert"].resetFields();中的addExpert是表单的ref

 

2、点击取消时，清空form表单

解决方法：在dialog框中的取消按钮中加个click事件

//html
 <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancelExpert('addExpert')">取 消</el-button>
            <el-button size="small" type="primary" @click="saveExpertInfo">保存</el-button>
 </div>

其中，cancelExpert('addExpert')的addExpert是表单名

//js
//取消dialog
    cancelExpert(formName){
      this.$refs[formName].resetFields();
      this.addExpertInfo = false; //关闭对话框
    },

记录于此！！！