关于vue + elementUI 的dialog弹窗清空弹窗内值的问题

最新推荐文章于 2023-05-06 17:38:20 发布
最新推荐文章于 2023-05-06 17:38:20 发布
阅读量6.2k 收藏 5
点赞数 2
分类专栏： web 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41949807/article/details/118108741
版权

近来比较繁忙，所以博客近期一直没有更新，今天就来和大家说说关于elementUI dialog弹窗清空值的问题在vue + elementUI项目中有时候会大量的用到弹窗这个组件，所以就对这个组件进行了统一封装。但是对于弹窗中的值的清空问题就有些麻烦了。

  1. 当dialog 中嵌套的是form表单时，我们可以使用Element UI自带的清空form表单方法

    this.$refs.formData.resetFields(); //重置表单数据，清除校验信息

  2. 或者手动的去重置清空表单数据

    this.formData.xxxx：''
this.formData.xxxx: []
……

  3. 给表单或者dialog组件添加v-if，当弹窗每次打开的时候就会清掉弹窗内的值

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible"/>
	<el-form :model="form" v-if="dialogTableVisible"/>
终端鹿
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
【Vue】项目dialog组件数据项清空
热门推荐
慕白Lee的博客
05-06 1万+
第一次打开dialog就不重置了, 这样第一次dom也构建完毕了, 不会存在获取不到的情况, 第二次的时候在使用this.$refs['myForm'].resetFields();数据清空报错, 发现只有第一次渲染才会报错, 后面就正常了,
element-ui的el-form验证和el-dialog关闭时清除验证
树上骑个猴的博客
08-17 1053
解决方案： 在el-dialog弹窗中加一个 v-if,，其中条件和弹窗的visible.sync的条件相同，如图： <el-dialog :title="packageAbout" v-if="packageAboutVisible" :visible.sync="packageAboutVisible"> 具体原因： v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-if在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切
element ui el-dialog关闭窗口清空表单验证
林太白
07-04 5603
❤ element ui中 el-dialog关闭窗口清空表单验证
el-dialog实现在弹窗外部清空弹窗内部及表单数据
敲代码无敌小奶龙的博客
01-31 869
el-dialog实现在弹窗外部清空弹窗内部及表单数据
el-dialog 打开时清除上次数据
lidianbai的博客
05-28 1443
项目中常用到el-dialog,我们需要在下次打开的时候 ，清除上次的数据 ，直接在打开弹窗的事件中加入这行代码： 1.清空表单： try { this.$refs['form'].resetFields() } catch (e) { // console.log(e); } 2.清空其他数据，可以在try后面将其清空 ： this.table = [] ...
vue + elementUI 的dialog弹窗里面的form表单重置
weixin_43299180的博客
08-12 9322
在vue项目使用elementUI的开发过程中，经常会用到form表单。对于form表单的重置和清空校验经常会使用到，这里我对自己用到几种方法做一个总结： Element UI自带的清空form表单方法 if(this.$refs.formData){//第一次打开dialog弹窗会报错，所以需要判断一下 this.$refs.formData.resetFields(); //重置表单数据，清除校验信息 } 手动重置formData里的每一项数据配合清空校验信息方法 this.formData
【轻松解决el-dialog关闭后数据缓存 没清空】
weixin_43690623的博客
10-26 8226
在使用el-dialog的时候，关闭弹窗之后，发现数据还是保存在上面，查资料试了那些方法，都不太行，最后琢磨出来这个最简单的方法，泪目。
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
最新发布
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
基于vue + elementUI的管理系统模板
02-22
3. **基于Vue + ElementUI的管理系统模板**： - **路由管理**：通常会使用Vue Router进行页面路由管理，实现单页应用（SPA）的页面跳转和参数传递。 - **状态管理**：Vuex是Vue.js的状态管理模式，用于集中管理...
vue+elementui+tinymce
03-27
弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key自增，实际富文本未被销毁，再次打开造成影响。可重写弹窗销毁策略。简单方法就添加v-if）
ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示
qq_45030898的博客
10-12 1072
ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示
element ui,监听el-dialog弹框，清除内容和校验规则
xx820702的博客
08-08 737
element ui,监听el-dialog弹框，清除内容和校验规则
Vue 对话框 Dialog 重新打开后数据重置/清空遗留问题
故屿γ
06-28 4519
在使用 vue+element 开发 Dialog 对话框的时候，点击一个按钮后，显示对话框，对话框填写数据使用下拉菜单展示并选择内容后，关闭模态框；再次打开对话框仍显示上次选中的数据分析原因
element ui el-dialog清空上一次的数据校验信息
ailian_f的博客
12-05 1608
element UI el-dialog窗口校验操作 引用el-dialog组件<el-dialog @open="openDialog" :title="title" :visible.sync="pullVisible"> <!-- 内容省略 --> <el-form :model="saveForm" :rules="rules" ref="saveForm"></el-form> </el-dialog> js代码处理，这个
elementUI对话框dialog实现“添加”功能时，关闭之后清空之前验证结果（某些输入框验证失败，出现红色提示文字）
string佳佳的博客
07-15 623
给 dialog 绑定一个v-if，使对话框重新加载一遍 <el-dialog title="添加抄表本" :visible.sync="dialogAdd" v-if="dialogAdd" :before-close="handleCloseAdd"> </el-dialog> ...
Dialog对话框 第二次打开显示第一次打开时的数据 解决办法
红烧咸咸鱼
06-01 2211
Dialog对话框 第二次打开显示第一次打开时的数据 解决办法 在 el-dialog 中添加 v-if = " 你所绑定的visible属性 " <!--解决方法--> <el-dialog title="" :visible.sync="dialogEdit" v-if='dialogEdit'> <editdialog :childData="childData" @EditDialog="getEditDialog"></editdialo
使用v-if指令刷新vue的组件
07-25
使用v-if指令可以根据表达式的值来控制一个元素或组件是否显示。当表达式的值为真时，该元素或组件会被渲染，当值为假时，会被移除。 在Vue中，当使用v-if指令控制一个组件时，当条件变为真时，组件会被创建和挂载到DOM上；当条件变为假时，组件会被销毁。 以下是一个示例，展示如何使用v-if指令刷新Vue的组件： ```html <template> <div> <button @click="toggleComponent">Toggle Component</button> <div v-if="showComponent"> <my-component></my-component> </div> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent }, data() { return { showComponent: false }; }, methods: { toggleComponent() { this.showComponent = !this.showComponent; } } }; </script> ``` 在上述示例中，点击"Toggle Component"按钮会切换`showComponent`的值。当`showComponent`为`true`时，`<my-component>`会被渲染到DOM上；当`showComponent`为`false`时，`<my-component>`会被从DOM上移除。 这样就可以通过改变`showComponent`的值来刷新Vue的组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值