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

news2024/10/7 10:17:45

文章目录

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

问题发现

点击按钮,没有想要的弹框
在这里插入图片描述
代码如下
在这里插入图片描述
修改 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.coloradmin.cn/o/1566151.html

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

相关文章

C++初阶:list类及模拟实现

list的介绍及使用 list的介绍 list 1. list 是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。 2. list 的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立节点中,在节点中通过指针指向…

代码随想录算法训练营第二十二天| 235.二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点

系列文章目录 目录 系列文章目录235. 二叉搜索树的最近公共祖先①递归法自己写的简洁版 ②迭代法不能这样写!正确写法 701.二叉搜索树中的插入操作①递归法②迭代法 450.删除二叉搜索树中的节点递归法 235. 二叉搜索树的最近公共祖先 ①递归法 自己写的 class So…

【C+ +】第一个C+ + 项目的创建及namespace命名空间解释C++中的输入输出

目录 1.创建第一个c项目 1.1项目创建 1.2 .cpp源文件建立 1.3 第一个c程序hello world对比c语言hello world 2.命名空间 2.1 C关键字 2.2 命名空间---解决c语言中的命名冲突 2.2.1 namespace命名空间用法 2.2.2 :: 预作用限定符 2.2.3 命名空间的嵌套…

SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现BES-TCN-BiGRU-Attention秃鹰算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…

rasa trian 报错解决---Project validation completed with errors.

rasa train 过程中:出现一下问题; Project validation completed with errors. 解决措施:python 3.10版本,rasa 3.6.19, 降低版本 pip3 install rasa3.5.17 -i https://pypi.tuna.tsinghua.edu.cn/simple成功解决

Vue3:Pinia简介及环境搭建

一、简介 Pinia是Vue3中的状态管理工具,类似与Vue2中的Vuex框架的作用 二、环境搭建 1、安装 npm install pinia2、配置 main.ts import {createApp} from vue import App from ./App.vue // 第一步:引入pinia import {createPinia} from piniacons…

SWM341系列应用(SFC和SPI应用)

SWM341系列 SFC和SPI应用 1、针对具有QSPI功能的SPI-NORFLASH,如需要使用4线数据为(4BIT)方式进行读操作,则需要将QE位使能,再开启4BIT的都操作指令后进行读取。 如没有开启QE位,则用4BIT进行读取的数据会有…

一维卷积神经网络的特征可视化

随着以深度学习为代表的人工智能技术的不断发展,许多具有重要意义的深度学习模型和算法被开发出来,应用于计算机视觉、自然语言处理、语音处理、生物医疗、金融应用等众多行业领域。深度学习先进的数据挖掘、训练和分析能力来源于深度神经网络的海量模型…

VUE——生命周期

概念&#xff1a; mounted:挂载 new Vue({el: "#x",data: {},methods: {},mounted() {}, }) 系统会自己调用&#xff0c;不需要我们调用。 案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

go包下载时报proxyconnect tcp: dial tcp 127.0.0.1:80: connectex错误的解决方案

一大早的GoLand就开始抽风了&#xff0c;好几个文件import都红了&#xff0c;于是我正常操作点击提示的sync&#xff0c;但是却报了一堆错&#xff1a; go: downloading google.golang.org/grpc v1.61.1 go: downloading google.golang.org/genproto v0.0.0-20240228224816-df9…

荣誉 | 人大金仓连续三年入选“金融信创优秀解决方案”

3月28日&#xff0c;由中国人民银行领导&#xff0c;中国金融电子化集团有限公司牵头组建的金融信创生态实验室发布“第三期金融信创优秀解决方案”&#xff0c;人大金仓新一代手机银行系统解决方案成功入选&#xff0c;这也是人大金仓金融行业解决方案连续第三年获得用户认可。…

C++STL--排序算法

sort 使用快速排序,平均性能好O(nlogn),但最差情况可能很差O(n^2)。不稳定。 sort(v.begin(),v.end());//对v容器进行排序,默认升序 sort(v.begin(),v.end(),greater<int>());//降序排序对于支持随机访问的迭代器的容器&#xff0c; 都可以利用sort算法直接对其进行排序…

【漏洞复现】用友NC cloud uploadChunk 存在任意文件上传

0x01 阅读须知 “如棠安全的技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供…

软考 系统架构设计师系列知识点之云原生架构设计理论与实践(13)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之云原生架构设计理论与实践&#xff08;12&#xff09; 所属章节&#xff1a; 第14章. 云原生架构设计理论与实践 第3节 云原生架构相关技术 14.3.2 云原生微服务 1. 微服务发展背景 过去开发一个后端应用最为直接的方…

Appium如何自动判断浏览器驱动

问题&#xff1a;有的测试机chrome是这个版本&#xff0c;有的是另一个版本&#xff0c;怎么能让自动判断去跑呢&#xff1f;&#xff1f; 解决办法&#xff1a;使用appium的chromedriverExecutableDir和chromedriverChromeMappingFile 切忌使用chromedriverExecutableDir和c…

Scala第十八章节(Iterable集合、Seq集合、Set集合、Map集合以及统计字符个数案例)

Scala第十八章节 章节目标 掌握Iterable集合相关内容.掌握Seq集合相关内容.掌握Set集合相关内容.掌握Map集合相关内容.掌握统计字符个数案例. 1. Iterable 1.1 概述 Iterable代表一个可以迭代的集合, 它继承了Traversable特质, 同时也是其他集合的父特质. 最重要的是, 它定…

Python基础中易错点分享

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、方法当变量使用二、字符串使用1.输出一个长句子换行时&#xff0c;需要使用续行符“\”&#xff0c;否则报错2.字符串的格式化3.字符串格式化之format()函数4.浅…

肿瘤免疫反应瀑布图(源于The Miller Lab)

目录 数据格式 绘图 ①根据剂量 ②根据type ③根据治疗响应度 添加水平线 数据格式 肿瘤免疫响应数据 rm(list ls()) library(tidyverse) library(dplyr) library(knitr)#模拟数据 # We will randomly assign the two doses, 80 mg or 150 mg, to the 56 subjects Me…

【星城战记】揭秘成本控制奥秘 如何超越个人开店!

在电玩城行业的竞争中&#xff0c;成本控制和运营管理是决定企业盈利能力和生存空间的关键因素。许多投资者在选择投资项目时&#xff0c;往往忽视了这两个方面的重要性&#xff0c;导致在运营过程中遭遇重重困难。而【星城战记】作为行业内的佼佼者&#xff0c;以其卓越的成本…

ruoyi-vue-pro 前端vue js直接import导入本地文件使用方法

第一步&#xff0c;删除所有依赖&#xff0c;否则配置以后就会启动报错&#xff1a; 第二步配置对应的文件格式&#xff0c;我当前使用的是xml文件 config.module.rule(xml).test(/\.xml$/).use(xml-loader).loader(xml-loader).end();第三步重新安装所有依赖&#xff1a; …