当前位置: 首页 > news >正文

vue中elementUI的el-select下拉框的层级太高修改设置!

项目场景:

项目中遇到一个问题,下拉框选择之后弹出一个弹出框选择数据再关闭。
问题就出在,我打开下拉框后再弹出弹出框,弹出框的 z-index 层级没有 select 的层级高,导致我弹框弹出了几个下拉框还在弹出框上面显示着,修改弹框层级的话又会盖住全局 loading 层级,所以我就想只修改 select 的层级,但是 ::v-deep 这些都修改不动,后来搜索找到问题是

<style>  // 这里加scoped的话,提升层级不会生效

一般写的样式都会加上 scoped 防止样式干扰全局样式从而引发其他样式问题,但是 el-select 还只有不加才生效

但是这样就会导致一个问题我知己在style里修改 el-select 本身的类名,因为没加 scoped 导致了其他页面下拉框层级也改变了,这就不符合只修改当前页面不影响全局的本意了

<style>
//el-select-dropdown为select都有的类名,再加上没有加scoped会导致影响全局select层级.el-select-dropdown{z-index:2000!important;}
</style>

解决方案:

最终解决方案:
结合给 el-select 添加自定义类名

<el-select v-model="value" placeholder="请选择" popper-class="select_poppers"  //定义class
><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>//样式里写
<style>  // 这里加scoped的话,提升层级不会生效
.select_poppers{z-index: 2000!important;
}
</style>

因为我加的自定义类名 select_poppers 是只有这个页面才有的,所以即使我不加 scoped 也不会影响到全局样式,因为新加的类名只有本页面才有,这样就完成了不影响全局的情况下修改 el-select 层级

相关文章:

vue中elementUI的el-select下拉框的层级太高修改设置!

项目场景&#xff1a; 项目中遇到一个问题&#xff0c;下拉框选择之后弹出一个弹出框选择数据再关闭。 问题就出在&#xff0c;我打开下拉框后再弹出弹出框&#xff0c;弹出框的 z-index 层级没有 select 的层级高&#xff0c;导致我弹框弹出了几个下拉框还在弹出框上面显示着…...

测试员最佳跳槽频率是多少?进来看看你是不是符合

最近笔者刷到一则消息&#xff0c;一位测试员在某乎上分享&#xff0c;从月薪5K到如今的20K&#xff0c;他总共跳了10次槽&#xff0c;其中还经历过两次劳动申诉&#xff0c;拿到了大几万的赔偿&#xff0c;被同事们称为“职场碰瓷人”。 虽说这种依靠跳槽式的挣钱法相当奇葩&…...

【数字信号处理】

https://www.bilibili.com/video/BV1B4421U79k/ 文章目录 1-绪论11-FFT1-绪论 1- Preliminery 引言 信号的概念,离散时间时域,频域2- 获得数字信号 采样,对信号的一种表达方式,是DSP的基础A/D,D/A 数字都是人造的,两个桥梁将现实和人造连接3-如何处理数字信号 两个工具:…...

Docker | 校园网上docker pull或者docker run失败的一种解决方法

场景 需要从仓库拉取镜像 无论使用命令docker pull 还是 docker run 但是总是显示如下的错误: 解决方法 查看虚拟机网络连接方式 Linux上检查校园网是否登录 有界面 无界面 只是命令行操作的Linux 关于Linux服务器端更新命令apt update没有效果问题总结(校园网认证)...

实现Java后端的图形验证码和行为验证码

登录添加图形验证码&#xff1a; 在 Java 中&#xff0c;我们可以使用一些图形处理库&#xff08;如 java.awt 和 javax.imageio&#xff09;生成图形验证码&#xff0c;并将验证码文本存储在会话&#xff08;session&#xff09;中以供验证。下面是一个完整的实现步骤&#x…...

事务的原理、MVCC的原理

事务特性 数据库事务具有以下四个基本特性&#xff0c;通常被称为 ACID 特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;事务被视为不可分割的最小工作单元&#xff0c;要么全部执行成功&#xff0c;要么全部失败回滚。这意味着如果事务执行过程中发生…...

Golang反射原理

Golang反射原理 Go语言中的反射机制是通过标准库中的reflect包实现的。反射允许程序在运行时检查变量的类型和值&#xff0c;甚至可以修改变量的值。以下是反射的基本原理和使用方法&#xff1a; 基本原理 类型和种类&#xff1a; 反射中的类型信息通过reflect.Type表示&…...

MATLAB计算朗格朗日函数

1. 朗格朗日函数介绍 朗格朗日函数&#xff08;Lagrange function&#xff09;通常用于优化问题&#xff0c;尤其是带有约束的优化问题。其一般形式为&#xff1a; 其中&#xff1a; f(x) 是目标函数。 是约束条件。 是拉格朗日乘子。 为了编写一个MATLAB代码来计算和绘制…...

嵌入式linux跨平台基于mongoose的TCP C++类的源码

嵌入式linux开发中&#xff0c;需要使用http服务器时&#xff0c;mongoose是个很好的选择&#xff0c;linux&#xff0c;win双平台都支持&#xff0c;代码全开放&#xff0c;简单明了&#xff0c;我非常喜欢这种尽在撑控中的感觉&#xff08;关于mongoose实现一个小型的http服务…...

入驻商家必看:如何在TikTok实现多店铺高效上货及运营?

TikTok作为跨境电商平台之一&#xff0c;越来越多人进入其电商赛道——TikTok Shop&#xff0c;运营者想要长远发展&#xff0c;了解平台的政策动向并进行调整店铺至关重要。本文整理了TikTok Shop降低入驻门槛的资讯&#xff0c;并为广大TikTok电商运营者提供实用、有效的开店…...

spring-boot-starter-data-redis

一、几个依赖的关系 在spring与redis整合时有下面几种&#xff1a; spring-boot-starter-data-redis spring-boot-starter-redis spring-data-redis 其中&#xff0c;spring-boot-starter-data-redis和spring-boot-starter-redis中都包含有spring-data-redis&#xff0c; 现在…...

科研绘图神器:机制图、模式图有哪些好用的工具推荐?

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 最近不少学员在问科研绘图相关的问题。前面娜姐介绍过AI辅助绘图的方法和思路&#xff1a; 顶刊的图文摘要Graphical Abstract&#xff0c;如何巧用AI绘制&#xff1f; 目前…...

DIFFUSIONSAT: A GENERATIVE FOUNDATION MODEL FOR SATELLITE IMAGERY(2024-ICLR)

论文&#xff1a;DIFFUSIONSAT: A GENERATIVE FOUNDATION MODEL FOR SATELLITE IMAGERY(2024-ICLR) 习惯用飞书做笔记了&#xff0c;大家见谅 Diffusionsat&#xff1a;卫星图像生成基础模型...

文件中台与安全:集成方案的探索与实践

在企业数字化转型加速的今天&#xff0c;文件中台已成为支撑数据共享与高效协作的关键基础设施。然而&#xff0c;随着企业文件需求的增多和内容复杂性的提升&#xff0c;文件的安全问题也日益突显。如何在构建强大文件中台的同时&#xff0c;保障文件数据的安全性&#xff0c;…...

Redis 哨兵 总结

前言 相关系列 《Redis & 目录》《Redis & 哨兵 & 源码》《Redis & 哨兵 & 总结》《Redis & 哨兵 & 问题》 参考文献 《Redis的主从复制和哨兵机制详解》《Redis中的哨兵&#xff08;Sentinel&#xff09;》《【Redis实现系列】Sentinel自动故…...

Systemd 和 Systemctl命令详解

Systemd 和 Systemctl命令详解 在现代 Linux 系统中&#xff0c;systemd 是一种高度灵活且广泛应用的系统管理工具。它主要负责系统引导和进程管理&#xff0c;支持并行化启动服务&#xff0c;并提供高级的服务管理和依赖控制。systemctl 是 systemd 的核心命令行工具&#xf…...

基于Multisim的音频放大电路设计与仿真

基本设计要求&#xff1a;设计并仿真实现一个音频功率放大器。功率放大器的电源电压为&#xff0b;5V&#xff08;电路其他部分的电源电压不限&#xff09;&#xff0c;负载为8Ω电阻。具体要求如下&#xff1a;1&#xff09;3dB通频带为300&#xff5e;3400Hz&#xff0c;输出…...

这是一款专门为SQL新手小白量身定制的工具!

首先&#xff01;它永久免费&#xff01;SQLynx对于个人用户和教育从业者永久免费&#xff01;且真正实现了跨平台操作&#xff01;支持Windows Linux和Mac&#xff0c;无需任 何安装和配置&#xff0c;更支持国产操作系统&#xff0c;如银河 麒麟统信等。 功能直观&#xff01…...

springboot 修复 Spring Framework 特定条件下目录遍历漏洞(CVE-2024-38819)

刚解决Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;没几天&#xff0c;又来一个新的&#xff0c;真是哭笑不得啊。 springboot 修复 Spring Framework 特定条件下目录遍历漏洞&#xff08;CVE-2024-38816&#xff09;https://blog.csdn.ne…...

Android Input的流程和原理

Android Input事件机制 Android系统是由事件驱动的&#xff0c;而Input是最常见的事件之一&#xff0c;用户的点击、滑动、长按等操作&#xff0c;都属于Input事件驱动&#xff0c;其中的核心就是InputReader和InputDispatcher。InputReader和InputDispatcher是跑在system_serv…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...