Element ui 的组件弹窗 el-dialog点击的时候全屏变灰问题解决

news2024/11/18 1:40:05

最近在使用Element UI 的弹窗组件的时候发现这个组件各种的应用都没有问题,数据和元素的应用都是正确的但是在点击显示这个弹窗的时候全屏幕都会变灰。
在这里插入图片描述

这也不是因为增加了modal 遮挡幕的问题,在经过不断的排查代码的时候基本排除了代码的问题,这个时候就觉得是不是因为组件的某个元素使的这个屏幕变灰,这个时候就一直在百度这个问题,发现网上很多都是说这个组件的遮挡幕元素的布尔值设置的问题,但是在修改的过程中也排查了不是因为这个而导致的。
在这里插入图片描述

最后又看到很多例子都是简单的显示,但是我是在一个表格里面嵌套了template,然后在template中使用的Dialog组件,这就有可能导致一个显示的层级问题,导致他在点击的时候显示灰色,这个时候看到elment-ui文档中有一个append-to-body属性: Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

也就是因为忽略了这个嵌套的Dialog必须指定属性为true从而导致我的弹出框是灰色的,在修改了布尔值之后,弹框就可以正常的使用了。
在这里插入图片描述
**PS:**以后在使用组件的时候一定要注意组件的元素说明,否则就容易和我一样因为这个而白白耗费一两个小时来解决问题

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

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

相关文章

第一节 分布式架构设计理论与Zookeeper环境搭建

目录 1. 分布式架构设计理论 1. 分布式架构介绍 1.1 什么是分布式 1.2 分布式与集群的区别 1.3 分布式系统特性 1.4 分布式系统面临的问题 2. 分布式理论 2.1 数据一致性 2.1.1 什么是分布式数据一致性 2.1.2 副本一致性 2.1.3 一致性分类 2.2 CAP定理 2.2.1 CAP定…

数据结构-数组(详细讲解)

文章目录 数组数组的概述数组的图示一维数组二维数组 数组的定义一维数组的定义二维数组的定义 数组的取值赋值一维数组二维数组 数组的操作一维数组的操作索引实现指针实现 二位数组的操作矩阵转三元组矩阵的乘法 数组 数组的概述 概述:数组是一种线性数据结构&a…

SQL Server ISO镜像文件安装

参考:Sql Server ISO镜像文件安装指南_sqlserveriso文件怎么安装-CSDN博客 参考文件中的步骤基本相同,注意两点 1、尽量安装在D盘,有些组件默认必须安装在C盘,有些会报没有目录的情况 需要在D盘创建目录。 2、我没有windows本地…

交叉编译opencv运行平台rk3588

opencv版本:4.8.0 opencv_contrib版本:4.8.0 在源码目录下建build目录,进入该目录配置编译选项生成makefile cmake 配置参数: cmake -DCMAKE_MAKE_PROGRAM:PATH/usr/bin/make -DCMAKE_INSTALL_PREFIX/home/rog/my_file/other_L…

开发通用模板设计

文章目录 需求摘要1 模板描述2 模板内容介绍2.1 模块间依赖关系2.2 模板目前集成2.2.1 swaggerKnife4j2.2.1 nacosSpringBootSpringCloudAlibaba 3 项目地址4 FAQ 需求 目前在开发中,使用的非本人搭建的项目架子,存在如下问题: 依赖无法统一…

MyBatis 的XML实现方法

MyBatis 的XML实现方法 MyBatis 的XML实现方法前情提示创建mapper接口添加配置创建xml文件操作数据库insert标签delete标签select标签resultMap标签 update标签sql标签,include标签 MyBatis 的XML实现方法 前情提示 关于mybatis的重要准备工作,请看MyBatis 的注解实现方法 创…

机器学习系列 16:使用 scikit-learn 的 Pipeline

在机器学习项目中,我们经常需要进行大量的数据预处理步骤,最后用处理干净的数据集来拟合机器学习算法得到一个合适的机器学习模型。 scikit-learn 提供了一个强大的 Pipeline 类来帮助我们将所有的数据预处理步骤和训练模型的步骤串起来。就像流水线一样…

【UE 材质】闪电材质

效果 步骤 1. 新建一个材质这里命名为“M_Lighting” 打开“M_Lighting”,设置混合模式为半透明,着色模型为无光照 在材质图表中添加如下节点 其中,纹理采样节点的纹理是一个线条 此时预览窗口中效果如文章开头所示。

LINUX基础培训十九之常见服务dns介绍

前言、本章学习目标 了解dns服务用途掌握dns服务器的配置掌握dns服务的使用 一、DNS服务概述 DNS是域名系统(Domain Name System)的缩写,是因特网的一项核心服务,它作为可以将域名和IP地址相互映射的个分布式数据库,能够使人更方便的访问…

计数排序(六)——计数排序及排序总结

目录 一.前言 二.归并小补充 三.计数排序 操作步骤: 代码部分: 四.稳定性的概念: 五.排序大总结: ​六.结语 一.前言 我们已经进入排序的尾篇了,本篇主要讲述计数排序以及汇总各类排序的特点。码字不易&#x…

Nuget包缓存存放位置迁移

一、背景 默认情况下,NuGet会将项目中使用的包缓存到C盘,随着项目开发积累nuget包越来越多,这会逐渐挤占大量C盘空间,所以我们可以将nuget包缓存位置指定到其他盘中存放。 二、软件环境 win10、vs2022 三、查看当前缓存存放位…

realsence 455 查看左右摄像头

前言 我打算使用realsence的左右连个摄像头去自己标定配准、然后计算距离的,就需要找s、下载包。 没成想,这个455的左右摄像头是红外的 步骤 安装sdk: Intel RealSense SDK 2.0 – Intel RealSense Depth and Tracking cameras 尽量在w…

为什么要用云手机养tiktok账号

在拓展海外电商市场的过程中,许多用户选择采用tiktok短视频平台引流的策略,以提升在电商平台上的流量,吸引更多消费者。而要进行tiktok引流,养号是必不可少的一个环节。tiktok云手机成为实现国内跨境养号的一种有效方式&#xff0…

【新书推荐】3.2节 位运算之加减乘除

本节内容:二进制移位运算,以及逻辑运算与算术运算之间的转换。任何进制的位运算本质都是一样的。 ■二进制数移位运算:二进制数向左移位运算相当于做2的幂乘法运算,二进制数向右移位运算,相当于做2的幂除法运算。 ■十…

qt学习:Table widget控件

目录 头文件 实战 重新配置ui界面 添加头文件 在构造函数中添加初始化 显示方法 该实例是在sqlite项目上添加qt学习&#xff1a;QTSQL连接sqlite数据库增删改查-CSDN博客 头文件 #include <QTableWidgetItem> 实战 重新配置ui界面 用法介绍&#xff0c;可以双击…

大数据StarRocks(八):资源隔离实战

前言 自 2.2 版本起&#xff0c;StarRocks 支持资源组管理&#xff0c;集群可以通过设置资源组&#xff08;Resource Group&#xff09;的方式限制查询对资源的消耗&#xff0c;实现多租户之间的资源隔离与合理利用。在 2.3 版本中&#xff0c;StarRocks 支持限制大查询&#…

RK3568 Android 13 系统裁剪

android 13 系统裁剪是个大工程&#xff0c;裁剪也是需要大量的测试&#xff0c;才能保证系统的稳定性&#xff0c;以下是RK官方给出的裁剪方案&#xff0c;有兴趣的可以去看一下&#xff0c;对裁剪不是要求过高的可以根据官方的建议&#xff0c;对系统进行裁剪: Rockchip And…

ssh 配置

ssh 配置 在管理Git项目上&#xff0c;很多时候都是直接使用 https url 克隆到本地&#xff0c;当然也有有些人使用 SSH url 克隆到本地。 这两种方式的主要区别在于&#xff1a;使用 https url 克隆对初学者来说会比较方便&#xff0c;复制 https url 然后到 git Bash 里面直…

纯html+js+css个人博客

首页 <!DOCTYPE HTML> <html> <head> <title>博客</title> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta name"viewport" content"widthdevice-width, initial-sca…

E. Vlad and a Pair of Numbers(位运算)

思路&#xff1a;如果x在这一位是1&#xff0c;说明a,b在这一位一个是1一个是0&#xff0c;我们默认a为1&#xff0c;b为0.. 对于n的一些位为0&#xff0c;那么a&#xff0c;b在这一位肯定相同。我们想&#xff0c;如果a和b的和右移一位与x相同&#xff0c;所以1的位置是相同的…