element-plus 解决el-dialog背后的页面滚动问题,及其内容有下拉框出现错位问题

devtools/2025/2/12 17:43:49/

这个问题通常是因为 el‑dialog 默认会锁定 body 的滚动(通过给 body 添加隐藏滚动条的样式),从而导致页面在打开对话框时跳转到顶部。解决方法是在使用 el‑dialog 时禁用锁定滚动功能。

<el-dialogv-model="dialogVisible":lock-scroll="false"title="示例对话框"width="50%"><!-- 对话框内容 -->
</el-dialog>

加上:lock-scroll="false"即可

但是当里面的内容有下拉选择的组件的情况,里面的组件点击出来后会错位,只要在组件上挨个加上 :teleported="false"即可

<el-select v-model="recordForm.relation" :teleported="false"><el-optionv-for="item in case_relation":label="item.label":value="item.value"></el-option></el-select>


http://www.ppmy.cn/devtools/158271.html

相关文章

数据结构 单链表的模拟实现

一、链表的定义 线性表的链式存储就是链表。 它是将元素存储在物理上任意的存储单元中&#xff0c;由于⽆法像顺序表⼀样通过下标保证数据元素之间的逻辑关系&#xff0c;链式存储除了要保存数据元素外&#xff0c;还需额外维护数据元素之间的逻辑关系&#xff0c;这两部分信息…

VideoWorld技术在智能货柜商品识别与数量统计的总结

&#x1f31f; “VideoWorld” 模型仅凭视觉信息即可实现知识学习&#xff0c;不依赖语言模型。 &#x1f916; 模型在围棋和机器人模拟任务中展现出卓越的推理和规划能力。 一、技术实现核心 生成式数据增强 功能&#xff1a;通过VideoWorld生成多样化的合成数据&#xff08;…

【C语言】球球大作战游戏

目录 1. 前期准备 2. 玩家操作 3. 生成地图 4. 敌人移动 5. 吃掉小球 6. 完整代码 1. 前期准备 游戏设定:小球的位置、小球的半径、以及小球的颜色 这里我们可以用一个结构体数组来存放这些要素,以方便初始化小球的信息。 struct Ball {int x;int y;float r;DWORD c…

【CubeMX+STM32】SD卡 U盘文件系统 USB+FATFS

本篇&#xff0c;将使用CubeMXKeil, 创建一个 USBTF卡存储FatFS 的虚拟U盘读写工程。 目录 一、简述 二、CubeMX 配置 SDIO DMA FatFs USB 三、Keil 编辑代码 四、实验效果 串口助手&#xff0c;实现效果&#xff1a; U盘&#xff0c;识别效果&#xff1a; 一、简述 上…

FlinkCDC 实现 MySQL 数据变更实时同步

文章目录 1、基本介绍2、代码实战 2.1、数据源准备2.2、代码实战2.3、数据格式 1、基本介绍 Flink CDC 是 Apache Flink 提供的一个功能强大的组件&#xff0c;用于实时捕获和处理数据库中的数据变更。可以实时地从各种数据库&#xff08;如MySQL、PostgreSQL、Oracle、Mon…

和鲸科技上线 DeepSeek 系列模型服务,助力数智企业 AI 业务创新!

近日&#xff0c;和鲸科技团队宣布旗下数据科学协同平台 ModelWhale 实现对 DeepSeek 全系列大模型的深度支持&#xff0c;旨在帮助更多数智化转型企业提供从算力基建到业务融合的全栈式解决方案&#xff0c;快速搭建自主可控的云端智能服务体系&#xff0c;实现大模型与业务系…

基于Spring Boot的网上宠物店系统设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

旅游全域体验系统(源码+文档+部署+讲解)

引言 随着旅游业的快速发展&#xff0c;全域旅游平台作为一种数字化创新&#xff0c;为游客提供了一站式的旅游服务体验。该平台整合了旅游信息、预订服务、客户互动等功能&#xff0c;极大地提升了旅游规划和体验的便捷性。 系统概述 全域旅游平台采用前后端分离的架构设计…