element中el-dialog在父组件内关闭弹框并且重置弹框数据

最新推荐文章于 2024-04-28 23:05:28 发布
最新推荐文章于 2024-04-28 23:05:28 发布
阅读量1.8k 收藏 5
点赞数
文章标签： vue html elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baozaobenren/article/details/111691160
版权

页面的弹框嵌入了editor然后我想关闭弹框把这条数据清空，点击下一跳数据出现下一条数据的信息，之前用了resetfields( )来重置表单，其他的数据都重置了 但是富文本里面的数据还是上一条的数据，然，解决方法：
1.父组件引用的子组件标签上用v-if一个变量来控制，写上关闭事件，在这个关闭事件中把变量置为false在这里插入图片描述在这里插入图片描述

2.在子组件的el-dialog上写上这个关闭事件在这里插入图片描述
在这个关闭事件中再写上$emit
在这里插入图片描述
这样就可以了，这样做相当于关闭这个弹框就销毁了这个子组件

问题制造者。
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element dialog 打开关闭弹窗组件的方式（父子组件传值）
BigOrange的博客
09-22 6458
背景： 将弹窗写在另一个的组件，打开弹窗，关闭时会报错。 报错原因： 因为打开弹框的状态值isShowCompleteApprova 是父组件传递给子组件的，而vue规定子组件不能直接修改子组件的值，所以报错如上。 附报错源代码： 父组件： // 父组件 <template> <div @click="handleCompleteApprova" >finish&l...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当对话框在不刷新页面的情况下被多次打开，可能会遇到自动校验的问题，即使用户没有主动触发校验。 这个...
element ui点击按钮弹出款_element-ui中点击按钮，弹出对话框，并使用父子组件传参的形式关闭对话框...
weixin_39602579的博客
12-22 1329
今天的需求是，使用element-ui插件编写页面，点击按钮，弹出对话框，并使用父子组件传参的形式关闭对话框。一、点击按钮，出现对话框描述三个按钮：组合工程科目匹配计算指标其中combineEngineering和subjectMatch是我要展示页面的组件名称，传入showDialog方法里面，控制不同页面，后面有介绍。这个因需求而异在控件里面描述属性使用 原有属性 :visible.sync ...
vue3中如何父组件中使用弹框，子组件中关闭弹框
最新发布
qq_42931285的博客
04-28 966
vue3中如何父组件中使用弹框，子组件中关闭弹框
在父组件中，重置子组件中的form表单resetFields()
Liberty_yes的博客
10-12 1345
在父组件重置子组件的form表单时，发现无法重置，报错：`vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"` 原因是，我们不能直接在父组件重置子组件的form。
ElementUI dialog弹框 退出时重置表单数据
小宝儿的学习之路
07-15 3994
需求 进行项目开发，用到了ElementUI的dialog弹出框，当再次点击弹出框时发现，原本数据的还存在 解决 查阅了ElementUI的文档，发现一个好东西 就是这个方法，解决了问题，分享一下用法 直接上代码吧，根据代码进行讲解 <template> <div> <el-dialog title="弹框的标题（可以根据需求自己定义）" :visible.sync="dialogVisible"
vue+elementui进行弹出框dialog的锁定操作
qq_45651172的博客
04-27 3313
ElementUI+Vue在使用el-dialog时，在弹出dialog时，点击框框以外的空白部分就直接给关闭了。 最近在用vue一个pc端的项目 大体上做的还是可以的, 但是有一些小问题 , 例如本次发现的点击弹出框以外的部分就会将弹出框自动关闭, 去百度了以后发现vue不是很方便, 所以去查了别人的csdn, 得到相关解决方法以后, 去elementUI的官网去查了一下, 发现还是蛮简单的,...
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
ElementUI--Dialog 弹框的使用
文龙刚的博客
02-21 1576
【代码】ElementUI--Dialog 弹框的使用。
vue数据增删改查及表单验证
qq_64001795的博客
10-14 3632
图三。
解决vue+Element+dialog,每次打开关闭弹框都不会重新渲染数据，仍保持在上一次数据记录
qq_45086494的博客
01-10 1391
解决vue+Element+dialog,每次打开关闭弹框都不会重新渲染数据，仍保持在上一次数据记录
element 弹窗作为组件关闭和打开
Alice_sy314的博客
01-19 1654
一.整个弹窗内容作为组件 1.在父组件中 如图，在父组件内通过 v-if 和 data 中的默认值（false）控制弹窗，默认弹窗是关闭的。 2.在子组件中 子组件 父组件 当使用弹窗右上角关闭按钮关闭弹窗时，子组件向父组件发送 ‘关闭’ 信号，父组件接受信号并通过 v-if 中的值设为false，实现关闭弹窗。 二.弹窗内的表单作为组件 父组件 子组件 父组件通过 :before-close=“handleClose” 方法控制点击右上角关闭按钮关闭弹窗 同时父组件可通过接受子组件发出的信
关于Element Popover弹窗关不掉的解决办法
AuraVic的博客
08-18 4521
情景： 在 element-ui 中 el-table 中使用Popover弹框 ，根据网上小伙伴提供的方法大部分都是这种： htm部分： <el-table-column> <template slot-scope="scope"> <el-popover placement="bottom" title="更多" width="100" trigger="click" :ref="`popover-${scope.$index}`"> <el-butt
vue element 父组件控制清空子组件里的值
疑问 搜索 动手 解决 记录
05-13 2074
父组件 <SelectPeople v-if="assetSetupDialogType == 2" @selectedPeople="getSelectedPeople" :select="1" :passInArray="passInArray" ref="selectPeople" /> 重点在于这个ref ,ref表明的是子组件的dom节点 子组件 clearInput(){ this.peopleId = []; }, ...
Element 表单重置
单飞吧的博客
08-02 1058
Element 表单重置的时候发现，不能把表单绑定的数据重置为空，这是因为我们在给表单绑定数据的操作其实是在created 进行绑定的，而 Element 的表单重置是重置为munted时候的值，因此我们只需要把操作在 munted 时候执行就可以了 this.$nextTick(()=> { this.formData.name = value.label; this.formData.proType = value.otherInfo.proType; }) ...
element UI el-form 重置内容
曲小强
12-02 733
弹窗重置
Element UI 表单清空异常（resetFields无法清空表单）
wangzi1993的博客
02-21 6574
问题描述 使用表单对列表的信息进行编辑，点击【取消】按钮关闭表单并调用resetFields清空表单的值。 第一次可以清空，但是再次点击【取消】按钮，表单自动填充第一次表单的值，并没有清空。 解决方法 弹出表单后不要直接对form赋值，将赋值语句放在 this.$nextTick(() => {// 这里对表单进行赋值}) 代码示例 handleUpdate (row) { this....
vue实现弹窗子组件打开关闭的几种方法
qq_45578024的博客
06-08 7714
1. 直接在父组件内操作子组件的变量 this.$refs.dialogName.showDialog = true直接（耦合度太高，不推荐直接操作子组件）
<el-dialog> 组件 append-to-body
07-27
在关闭对话框时，可以重置表单数据并清空表单验证，以确保下次打开对话框时表单是干净的。\[2\] #### 引用[.reference_title] - *1* *3* [el-dialog 组件中 :append-to-body=“true]...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值