幽灵资源网 Design By www.bzswh.com
最近在写增删改查，在新增的时候要弹出对话框填写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();
}
}
}
总结：
this.$refs[formName].resetFields();在数据重置时，因为取消按钮绑定了formName，所以可以不填写而直接写formName，但关闭没有绑定，所以[‘form']里面写formName就可以了。
以上这篇vue+elementui 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...