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

这个问题通常是因为 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.mzph.cn/web/69625.shtml

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

相关文章

SpringBoot+Dubbo+zookeeper 急速入门案例

项目目录结构&#xff1a; 第一步&#xff1a;创建一个SpringBoot项目&#xff0c;这里选择Maven项目或者Spring Initializer都可以&#xff0c;这里创建了一个Maven项目&#xff08;SpringBoot-Dubbo&#xff09;&#xff0c;pom.xml文件如下&#xff1a; <?xml versio…

游戏引擎学习第96天

讨论了优化和速度问题&#xff0c;以便简化调试过程 节目以一个有趣的类比开始&#xff0c;提到就像某些高端餐厅那样&#xff0c;菜单上充满了听起来陌生或不太清楚的描述&#xff0c;需要依靠服务员进一步解释。虽然这听起来有些奇怪&#xff0c;但实际上&#xff0c;它反映…

Spring Boot + MyBatis Field ‘xxx‘ doesn‘t have a default value 问题排查与解决

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 执行代码的时候,出现某个字段无法添加 ### Error updating database. Cause: java.sql.SQLException: Field e_f_id doesnt have a default value ### The error may exist in cn

【分布式理论9】分布式协同:分布式系统进程互斥与互斥算法

文章目录 一、互斥问题及分布式系统的特性二、分布式互斥算法1. 集中互斥算法调用流程优缺点 2. 基于许可的互斥算法&#xff08;Lamport 算法&#xff09;调用流程优缺点 3. 令牌环互斥算法调用流程优缺点 三、三种算法对比 在分布式系统中&#xff0c;多个应用服务可能会同时…

redo和binlog区别

事务是数据库区别于文件系统的最重要功能&#xff0c;数据库事务支持ACID四个特性&#xff0c;其中I&#xff1a;隔离性是通过锁的方式实现的&#xff0c;剩下的A&#xff1a;原子性 C&#xff1a;一致性 D&#xff1a;持久性是通过redo日志、undo日志、binlog日志来实现的。 我…

安宝特方案 | AR助力制造业安全巡检智能化革命!

引言&#xff1a; 在制造业中&#xff0c;传统巡检常面临流程繁琐、质量波动、数据难以追溯等问题。安宝特AR工作流程标准化解决方案&#xff0c;通过增强现实AR技术&#xff0c;重塑制造业安全巡检模式&#xff0c;以标准化作业流程为核心&#xff0c;全面提升效率、质量与…

芋道源码(无遮羞布版)Spring Boot 全景指南

芋道源码&#xff08;无遮羞布版&#xff09;Spring Boot 全景指南 项目地址:https://gitcode.com/gh_mirrors/ru/ruoyi-spring-boot-all 一、项目目录结构及介绍 芋道源码&#xff08;ruoyi-spring-boot-all&#xff09;项目基于Spring Boot构建&#xff0c;旨在提供一个全…

科技查新过不了怎么办

“科技查新过不了怎么办&#xff1f;” “科技查新不通过的原因是什么&#xff1f;” 想必这些问题一直困扰着各位科研和学术的朋友们&#xff0c;尤其是对于查新经验不够多的小伙伴&#xff0c;在历经千难万险&#xff0c;从选择查新机构、填写线上委托单到付费&#xff0c;…

【AI时代】Page Assist - 本地 AI 模型的 Web UI (谷歌浏览器) 本地DeepSeek启用联网功能

Page Assist - 本地 AI 模型的 Web UI 一、部署本地模型 参考教程&#xff1a;https://blog.csdn.net/Bjxhub/article/details/145536134二、安装插件 Page Assist 浏览器谷歌商店搜索 Page Assist &#xff0c;安装该插件。 注意&#xff1a;需要一点科学的魔法。 三、使用…

SSM开发(十三) Spring的入门及demo应用(含完整源码)

目录 一、认识Spring框架 二、Spring框架优缺点 三、Spring框架体系结构 Spring结构图 核心容器Core Container模块 数据访问/集成Data Access/Integration Web AOP and Instrumentation 消息(Messaging)——Messaging 测试(Test) 四、Spring项目布局 五、Spring…

collabora online+nextcloud+mariadb在线文档协助

1、环境 龙蜥os 8.9 docker 2、安装docker dnf -y install dnf-plugins-core dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sed -i shttps://download.docker.comhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce /etc/yum.repos.…

Spring MVC 拦截器(Interceptor)与过滤器(Filter)的区别?

1、两者概述 拦截器&#xff08;Interceptor&#xff09;&#xff1a; 只会拦截那些被 Controller 或 RestController 标注的类中的方法处理的请求&#xff0c;也就是那些由 Spring MVC 调度的请求。过滤器&#xff08;Filter&#xff09;&#xff1a; 会拦截所有类型的 HTTP …

音频知识基础

音频知识基础 声音属性声音度量人耳特性通道数音频数字化传输接口 声音属性 响度 响度是人耳对声音强弱的主观感受&#xff1b; 主要和声波的振幅相关&#xff0c;同时也和频率有一定关系&#xff1b; 音调 音调是人耳对声音高低的主观感受&#xff1b; 主要与频率相关&#…

SQL Server 逻辑查询处理阶段及其处理顺序

在 SQL Server 中&#xff0c;查询的执行并不是按照我们编写的 SQL 语句的顺序进行的。相反&#xff0c;SQL Server 有自己的一套逻辑处理顺序&#xff0c;这个顺序决定了查询的执行方式和结果集的生成。了解这些处理阶段和顺序对于优化查询性能和调试复杂查询非常重要。 SQL …

Ruby 日期 时间处理指南

Ruby 日期 & 时间处理指南 在软件开发中,日期和时间处理是不可或缺的一部分。对于Ruby这样的编程语言,它提供了强大的库来帮助开发者轻松处理日期和时间相关的任务。本文将详细介绍Ruby中的日期和时间处理,包括常用类、方法以及最佳实践。 Ruby日期与时间类 Ruby中处…

微信小程序文件流转base64文件,wx.arrayBufferToBase64()方法已弃用

wx.arrayBufferToBase64 方法在微信小程序的基础库版本 2.4.0 起已废弃&#xff0c;不建议继续使用。 我们可以将ArrayBuffer 转换为 base64&#xff0c;使用base64-js来实现转换。具体操作如下&#xff1a; 1、安装base64-js,可以通过npm进行安装&#xff0c;或者从github获取…

CTF中PHP的一些函数(学习记录)

isset()函数用于检查一个变量是否已经被设置并且非NULL empty()函数用于检查一个变量是否为空 strpos()函数用于查找一个字符串在另一个字符串中首次出现的位置 preg_match()函数是一个强大的工具&#xff0c;用于执行正则表达式匹配。它搜索字符串中与给定模式匹配的内容 va…

HTTP请求响应分析:HTTP/1.1→HTTP/2

1. HTTP协议概览 HTTP&#xff08;HyperText Transfer Protocol&#xff09;是客户端&#xff08;浏览器&#xff09;与服务器通信的基础协议&#xff0c;其核心由请求消息&#xff08;Request&#xff09;和响应消息&#xff08;Response&#xff09;构成。当前主流版本为HTT…

二、通义灵码插件保姆级教学-IDEA(使用篇)

一、IntelliJ IDEA 中使用指南 1.1、代码解释 选择需要解释的代码 —> 右键 —> 通义灵码 —> 解释代码 解释代码很详细&#xff0c;感觉很强大有木有&#xff0c;关键还会生成流程图&#xff0c;对程序员理解业务非常有帮忙&#xff0c;基本能做到哪里不懂点哪里。…

C# Basic

文章目录 项目地址一、基础501. What is CIL?2. What is CLR?3. What is the difference betweent value type and reference types?4. what is boxing and unboxing?5. How are exceptions handled in C#?6. What is the difference between a class and a struct?7. Wh…