ui表单 vue 重置element_vue+elementui 对话框取消 表单验证重置示例

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。

vue：

:title="titleName[dialogStatus]"

:visible.sync="dialogFormVisible"

@close="closeDialog"

:close-on-click-modal="false">

...

取消

保存

js：

export default{

data() {

form: {

}

},

methods:{

// 对话框取消事件

closeFrom(formName){

this.dialogFormVisible = false;

// 点击取消 数据重置

this.$refs[formName].resetFields();

},

// 对话框关闭事件

closeDialog(){

// 点击关闭 数据重置

this.$refs['form'].resetFields();

}

}

}

总结：

this.$refs[formName].resetFields();在数据重置时，因为取消按钮绑定了formName，所以可以不填写而直接写formName，但关闭没有绑定，所以[‘form']里面写formName就可以了。

以上这篇vue+elementui 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。