公司网站微信小程序_vue+elementui 对话框撤销 表单验证重置示例

2021-01-06

vue+elementui 对话框取消 表单验证重置示例       今天小编就为大家分享一篇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" 
 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 对话框取消 表单验证重置示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866