[已解决]Vue3+Element-plus使用el-dialog对话框无法显示

文章目录

    • 问题发现
    • 原因分析
    • 解决方法

问题发现

点击按钮,没有想要的弹框
在这里插入图片描述
代码如下
在这里插入图片描述
修改 el-dialog到body中,还是不能显示
在这里插入图片描述

原因分析

使用devtool中vue工具进行查看组件结构
在这里插入图片描述
原因在于,在一个局部组件(Detail->ElTabPane->…)中使用el-dialog,这个局部组件实际DOM结构中层级较低,限制了遮罩的扩展,el-dialog是覆盖整个页面区域的组件。
应该在更高层级来显示el-dialog,可以使用Vuex、props+emit、事件总线(Event Bus)来控制它的显示与隐藏。

解决方法

回忆原来在较高DOM层级的组件(Detail)中也有使用el-dialog,我考虑使用Vuex中的state来保存弹窗显示状态、以及弹窗内容的选择(条件渲染),这样,两个场景下的弹窗都可以共用这一个el-dialog组件
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt实现Kermit协议(三)

3 实现 3.2 KermitSendFile 该模块实现了Kermit发送文件功能。 序列图如下: 3.2.1 KermitSendFile定义 class QSerialPort; class KermitSendFile : public QObject, public Kermit {Q_OBJECT public:explicit KermitSendFile(QSerialPort *serial, QObject *…

RL — 强化学习的若干技巧

RL — 强化学习技巧 目录 一、说明二、设置引用三、输入特征3.1 RL 不完全是深度学习3.2 批量归一化和辍学方法可能不适用于 RL。3.3 越大不一定越好3.4 本地 Optima四、超参数优化五、鲁棒性六、重塑奖励功能6.1 可行性研究6.2 数据预处理6.3 监测6.4 监控培训进度6.5 调音6…

计算机网络针对交换机的配置

实验 目的 交换机的基本配置,交换机VLAN配置 实验条件 Windows,Cisco packet tracer 实验 内容 交换机的基本配置,交换机VLAN配置 实验 过程 一、交换机的基本配置 进入特权模式 Switch>enable 进入配置模式 Switch#configure ter…

2024年阿里云新用户便宜购买云服务器攻略:5大细节助你降低购买成本

随着互联网的蓬勃发展,无论是个人还是企业,拥有一个稳定且高效的网站或APP已成为提升竞争力的关键。为了将这些项目部署并运行起来,购买一台实用又便宜的云服务器是必不可少的。阿里云作为国内首屈一指的云服务提供商,自然成为了众…

openGauss学习笔记-254 openGauss性能调优-使用Plan Hint进行调优-子链接块名的hint

文章目录 openGauss学习笔记-254 openGauss性能调优-使用Plan Hint进行调优-子链接块名的hint254.1 功能描述254.2 语法格式254.3 参数说明254.4 示例 openGauss学习笔记-254 openGauss性能调优-使用Plan Hint进行调优-子链接块名的hint 254.1 功能描述 指明子链接块的名称。…

华为机试打卡 HJ6 质数因子

要机试了,华孝子求捞,功德 描述 功能:输入一个正整数,按照从小到大的顺序输出它的所有质因子(重复的也要列举)(如180的质因子为2 2 3 3 5 ) 数据范围: 1≤n≤210914 输入描述&…

CRMEB 标准版 v5.3公测版发布,快来体验

演示站 后台:http://v5.crmeb.net/admin 账号:demo 密码:crmeb.com H5端:http://v5.crmeb.net 新增功能 后台支持所有功能设置搜索 事业部:想在事业部添加代理商,可以在后台选择添加员工,设…

静态图片如何生成gif动画?一个网站在线实现

在当下这个媒体时代,各种各样的图片充斥着我们的生活。尤其是gif动图能够快速有效的传递信息,让用户更加直观的了解某个时间或是场景。非常的生动便捷,那么怎么弄制作gif动画图片呢?其实,只是gif动画的方法非常的简单&…

基于Springboot+vue的宠物服务管理系统+论文文档

基于Springbootvue的宠物服务管理系统论文文档 预览 简介 本系统共分为三个角色:管理员、用户: 管理员:管理员管理、密码修改、用户管理、充值管理、商品分类管理、商品信息管理、订单信息管理、分享趣事管理、医疗服务管理、服务预约管理…

【python学习笔记】pandas写入数据库时出现 “nan can‘t be used with mysql“ 错误的解决方法

pandas写入数据库时出错:nan cant be used with mysql pandas写入数据库时出错的解决方法pandas 2.0以前的版本pandas 2.0以上版本2.0以前版本的pandas是否能采用2.0以上版本的方法替换成None? pandas写入数据库时出错的解决方法 在使用pandas将一段数据…

Acrel-1000DP光伏监控系统在尚雷仕(湖北)健康科技有限公司5.98MW分布式光伏10KV并网系统的应用

摘 要:分布式光伏发电特指在用户场地附近建设,运行方式多为自发自用,余电上网,部分项目采用全额上网模式。分布式光伏全额上网的优点是可以充分利用分布式光伏发电系统的发电量,提高分布式光伏发电系统的利用率。发展分…

rust - 常用时间处理

本文提供了一些常用的时间处理函数。 use chrono::prelude::*; use std::time::SystemTime;const DATETIME_FORMAT: &str "%Y-%m-%d %H:%M:%S";将当前时间转换为UTC时区的字符串格式 pub fn format_datetime() -> String {let now Utc::now();return now.…

云渲染工具有哪些呢?主流云渲染软件推荐

云渲染技术根据其工具的类型分为两种主要形式:首先,有的渲染软件支持与多种云渲染平台集成,提供了广泛的兼容性以及各种扩展功能,适配不同服务商的具体需求。第二种则是由云渲染服务提供商特别开发的客户端应用,这是为…

快速get的3种办法!教你将视频号的视频保存到相册

很多人要将视频号的视频保存到相册,自己却不知道怎么保存?您可以尝试以下几种方法: 1. 利用视频缓存: 当您在视频号中观看视频时,视频通常会被暂时缓存到您的设备上。您可以在设备的文件夹中找到这些缓存文件,然后选中想要保存…

Ipa Guard软件介绍:启动界面和功能模块全解析,保护你的iOS应用源码

目录 ipaguard界面概览 ipaguard启动界面 ipaguard代码混淆界面 资源文件混淆界面 重签名界面 ipaguard界面概览 ipaguard界面分左右2块:左边菜单导航栏,右边的功能区 左侧菜单:按模块分成启动界面,代码模块,文件…

GEE下载Modis多年土地利用产品MCD12Q1

GEE 下载MODIS/006/MCD12Q1多年LC //500m比较粗糙 //只保留roi的几何形状 var roi ee.FeatureCollection("projects/your geofile").geometry();//将显示的图层缩放到研究区中心 Map.centerObject(roi,5) Map.addLayer(roi)for(var i 2005;i<2010;i){ var dat…

Java中的可变字符串

Java中的可变字符串 一、什么是可变字符串二、可变字符串的使用场景以及使用步骤1.新建一个可变字符串2.可变字符串的一系列方法 一、什么是可变字符串 可变字符串是Java.lang包下的 在我们学习到JDBC的时候需要将原有的sql语句根据不同的差异添加一段新的关键字或者单词&…

即将截稿 CCF-A多媒体顶会ACM MM‘24 北京时间4月9日提交摘要

会议之眼 快讯 第32届ACM MM (ACM MULTIMEDIA)即国际多媒体会议将于 2024 年 10月28 -日11月1日在澳大利亚墨尔本隆重举行&#xff01;MM是由ACM&#xff08;Association for Computing Machinery&#xff0c;计算机协会&#xff09;主办的国际性学术会议&#xff0c;是计算机…

毕马威:《智慧之眼:开启汽车感知新时代》

在全球科技飞速发展和产业革新的大潮中&#xff0c;汽车产业正在以前所未有的速度向网联化、智能化的方向转型。汽车传感器作为智能联网汽车发展的关键环节之一&#xff0c;扮演着举足轻重的角色。 毕马威一直关注汽车产业的变化与发展&#xff0c;为了更好地为汽车行业赋能&a…

评价指标_Precision(精确率)、Recall(召回率)和Accuracy(准确率)区别和联系

Precision&#xff08;精确率&#xff09;、Recall&#xff08;召回率&#xff09;和Accuracy&#xff08;准确率&#xff09;是机器学习和信息检索领域常用的评价指标&#xff0c;它们用于评估分类器或检索系统的性能&#xff0c;但各自关注的方面略有不同。 Precision&#x…