vue+elementui 对话框取消 表单验证重置示例
最近在写增删改查,在新增的时候要弹出对话框填写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 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-resource 拦截器interceptors使用详解
这篇文章主要介绍了vue-resource 拦截器interceptors使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-01-01vue+element-ui+sortable.js实现表格拖拽功能
这篇文章主要为大家详细介绍了vue+element-ui+sortable.js实现表格拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-04-04Vue proxyTable配置多个接口地址,解决跨域的问题
这篇文章主要介绍了Vue proxyTable配置多个接口地址,解决跨域的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新
这篇文章主要介绍了Vue使用Echarts实现横向柱状图,并通过WebSocket即时通讯更新方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03
最新评论