element dialog对话框中select/cascader 弹窗不跟随问题

news2024/10/6 8:21:38

Element 在使用对话框中出现的情况

Select 选择器
Cascader 级联选择器
在这两种组件组合使用是出现了滑动 弹出框不跟随情况,如下
不跟随情况
出现这种情况原因是因为弹出框相对的位置是body,展示后,如果body不动,所以弹窗位置不会发生改变。

Select 选择器

popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false

Cascader 级联选择器

append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false
这两个组件相对body是true,所以弹窗不会发生跟随的情况

如何解决

对于这种情况如何修改为弹窗跟随情况呢?
Select 选择器

<div class="selectFollow">
              <el-select v-model="llyForm.productType" placeholder="请选择产品状态" :popper-append-to-body="false" popper-class="myHeightCascader" @change="productTypeChange">
                <el-option v-for="(item,index) in productTypeArray" :key=index :label="item.text" :value="item.id">
                </el-option>
              </el-select>
</div>


.selectFollow {
  position: relative;
  .myCascader {
    position: absolute !important;
    top: 40px !important;
    left: 0;
  }
}

Cascader 级联选择器

<div class="areaCity>
<el-cascader placeholder="选择区域(可搜索)" filterable v-model="areaNoBlock" :append-to-body="false" popper-class="myCascader" :options="cityDataAry" :props="optionProps" :show-all-levels="false" ref="cascaderHandle"></el-cascader>
</div>

.areaCityTail {
  position: relative;
  .myCascader {
    position: absolute !important;
    top: 40px;
    left: 0;
  }
}

这两种组件在对话框内弹窗不跟随修改方案是不将弹出框插入至 body 元素,然后重新将组件弹窗相对位置调整实现跟随。

欢迎点赞/收藏

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

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

相关文章

研发工程师玩转Kubernetes——创建一个测试容器

测试容器并不是什么都没有的容器&#xff0c;只是它没有我们期望的常驻进程。我们常用它来做一些测试。 举个例子&#xff0c;在《研发工程师玩转Kubernetes——自动扩缩容》中我们使用本地wrk进行了压力测试。如果我们希望进入容器手工调用wrk&#xff0c;该怎么做呢&#xff…

后摩尔时代,洞见第三代功率半导体器件参数测试的趋势和未来!

前言 2022年&#xff0c;全球半导体产业连续高增长&#xff0c;进入调整周期。与此形成对比&#xff0c;在新能源汽车、光伏、储能等需求带动下&#xff0c;第三代半导体产业保持高速发展&#xff0c;全球化供应链体系正在形成&#xff0c;竞争格局逐步确立&#xff0c;产业步…

网络协议格式 | 以太网帧、ARP数据报、IP数据报、UDP数据报、TCP数据报

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

计算机视觉实战--OpenCV进行红绿灯识别

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 OpenCV是一个开源的计算机视觉库&#xff0c;可以用于实现各种图像和视频处理任务&#xff0c;包括红绿灯识别。可以帮助自动驾驶汽车、智能交通系统等设备准确地识别红绿灯的状态&#xff0c;以便做出正确的决策。今天&a…

2022-Deep generative molecular design reshapes drug discovery-分子生成设计重塑药物发现

文章目录 药物发现中的深度生成模型化合物/分子的表示 Deep Generative Models递归神经网 RNN变分自动编码器 VAE生成性对抗网络 (Generative Adversarial Networks, GANs)Flow-based models强化学习(Reinforcement Learning, RL) 在小分子药物设计中的应用生成有效的小分子生成…

X2000 freeRTOS usb_bulk通信

例程 官方例程..\freertos\example\usb\device\gadget_generic_bulk.c&#xff0c;代码如下&#xff1a; #include <common.h> #include <usb/gadget_bulk.h> #include <os.h>static const struct gadget_id bulk_id {.vendor_id 0x1CBE,.product_id 0x…

3.1. 字符串与StringBuilder

1. 字符串&#xff08;String&#xff09; 在Java中&#xff0c;字符串由String类表示。字符串是一系列字符的组合&#xff0c;用于表示文本数据。字符串是不可变的&#xff0c;这意味着一旦创建了一个字符串对象&#xff0c;就不能修改它的内容。 创建字符串 创建字符串的方…

真的裂开了呀,现在的00后,真是卷死了,辞职信已经写好了

谁说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;上个月我们公司来了个00后&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪22K&#xff0c;都快接近我了。 后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 …

Android 应用打包和编译技术

Android 应用打包和编译技术非常重要&#xff0c;因为它们可以帮助开发者将代码转换成可执行的应用程序&#xff0c;并优化应用程序的性能和稳定性。 1. Gradle Gradle 是基于 Groovy 语言和 Java 虚拟机&#xff08;JVM&#xff09;运行的构建工具&#xff0c;通过它来配置应…

【目标检测】yolov5代码实战

文章目录 一、yolov5介绍二、yolov5安装2.1 yolov5的源码下载2.2 预训练模型下载2.3 安装yolov5的依赖项2.4 检测是否安装成功 三、yolov5训练自己的数据集参考资料 一、yolov5介绍 YOLO 是 “You only look once” 缩写 , 是将图像划分为网格系统的对象检测算法&#xff0c;网…

110.(cesium篇)cesium动态河流流水

听老人家说:多看美女会长寿 地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可“私信”博主。 效果如下所示: cesium动态河流流水 下面献上完整代码,代码重要位置会做相应解释 <html lang="en

HHDESK及HHDBCS快捷升级功能

为提升用户体验&#xff0c;HHDESK及HHDBCS新增了一项功能&#xff0c;一键升级。 1 使用软件时快捷升级 在产品首页点击帮助&#xff0c;选择软件升级 弹出如下对话框&#xff1b;点击确定 随即弹出对话框&#xff1b;点击浏览&#xff0c;选择下载到本机上的新版本产品…

踢碎破局陷阱,来一场酣畅淋漓的 SLG!

SLG 作为深度策略游戏品类的代表&#xff0c;一直是展现人类智慧之光的最佳舞台之一。欣赏顶尖玩家间的对决是一场大脑的狂欢&#xff0c;奇谋频出、神机莫测般的对局让人不禁摩拳擦掌&#xff0c;跃跃欲试。但当我们打开游戏时&#xff0c;往往是高玩难觅&#xff0c;人机相陪…

3.4. Java集合框架(List、Set、Map等)

Java集合框架是Java提供的一套用于存储和操作数据的接口和类。它包括以下几个主要部分&#xff1a; 接口&#xff1a;集合框架定义了一系列接口&#xff0c;如Collection、List、Set、Map等。实现类&#xff1a;集合框架提供了一些实现这些接口的类&#xff0c;如ArrayList、L…

【HISI IC萌新虚拟项目】cpu_if模块方案文档

该文档仅为参考,如果在进行本系列虚拟项目的学习与实践,请自行完成本部分内容。 由于文档格式在之前博客中已展现,因此本文只针对关键点写一下方案。 cpu_if模块概述 cpu_if模块主要是寄存器单元以及寄存器访问通路的处理,可以看下整体结构图: 因此我们可以概括cpu_if模…

看完这篇 教你玩转渗透测试靶机vulnhub—DarkHole

Vulnhub靶机DarkHole渗透测试详解 Vulnhub靶机介绍&#xff1a;Vulnhub靶机下载&#xff1a;Vulnhub靶机安装&#xff1a;Vulnhub靶机漏洞详解&#xff1a;①&#xff1a;信息收集&#xff1a;②&#xff1a;逻辑漏洞&#xff1a;③&#xff1a;文件上传GetShell&#xff1a;④…

用可编程逻辑器件FPGA LCMXO2-4000HC-6MG132I 实现智能汽车解决方案设计

LCMXO2-4000HC-6MG132I lattice莱迪斯深力科 MachXO2 可编程逻辑器件 (PLD) 由六个超低功耗、即时启动、非易失性 PLD 组成&#xff0c;可提供 256 至 6864 个查找表 (LUT) 的密度。 MachXO2 系列 PLD 提供多种特性&#xff0c;例如嵌入式块 RAM (EBR)、分布式 RAM 和用户闪存 …

PhoneHelper

不一样的手机管理工具 一款基于 Golang 语言开发的手机管理软件——PhoneHelper。 PhoneHelper 是一款支持无线&#xff08;安卓11及以上支持扫码连接&#xff09;和有线的adb方式连接设备并且管理设备的软件&#xff0c;同时已适配 Windows、Linux、MacOS 平台&#xff0c;在不…

在Linux设备上让程序在任意目录都能执行

目录 0. 前言1. 编写代码2. 创建软链接3. 其他Linux文章 0. 前言 在Ubuntu上使用espidf中往往需要先设置环境变量&#xff0c;再执行export.sh&#xff0c;对环境装的乱七八糟的我造成了很大的不便我希望无论我在哪个目录&#xff0c;都能快速执行某个命令 我先是使用了编写b…

2023年高级系统架构设计师 如何备考?

高级架构有一定的难度&#xff0c;但是值得挑战一下 新版《系统架构设计师考试大纲》出版了&#xff01; 可以去官网看看 系统架构设计师是软考的高级科目之一&#xff0c;系统架构设计师一年只有一次考试机会&#xff0c;是在下半年11月份考试 考试科目分为&#xff1a;综合…