【element-ui】el-dialog中使用el-select，下拉列表被挡住的解决办法

最新推荐文章于 2024-06-02 18:23:06 发布
最新推荐文章于 2024-06-02 18:23:06 发布
阅读量1.5w 收藏 1
点赞数 1
分类专栏： vue 文章标签： element-ui el-dialog el-select
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_24734285/article/details/80441348
版权

一开始以为没获取到列表数据，后来发现有， 只是下拉列表被模态框挡住了，定位到每次鼠标经过打开dialog的按钮时，dialog的层级都会递增；
后来找到element-ui中的源码的这一行：
这里写图片描述
发现这样dialog的层级就不会递增了（固定在2000），列表也能正常展示了。
但是不确定会不会对其他组件造成影响，目前还没发下，如果有问题再来更新。
这句代码的路径：
这里写图片描述

游走走
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【element-ui】dialog中使用select，下拉列表被挡住
nefu1234的博客
04-28 6177
这个问题是因为下拉框层级太低被挡住了，修改层级就可以了 <el-dialog title="增加指标" :visible.sync="adddialogVisible" width="30%" center> <el-fo...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决element-Plus中 el-Select在el-Dialog中使用，刷新页面时会导致el-Select被遮挡问题
最新发布
Jacob_vue的博客
06-02 200
在使用Element-Plus的组件时，很多情况下会在对话框内部使用组件。然而，由于会创建一个新的层级上下文(z-index),默认为2079，而组件本身的z-index值低于组件的z-index，这就会再刷新页面后导致的下拉选项被遮挡住，无法显示出来。在标签上加上popper-class属性，用于为组件自定义添加样式，此时就可以设置合适的z-index值来解决z-index值低于的问题。
el-select选项被弹框遮住
zqq_1119的博客
11-02 1376
打开弹框，里面又select选择器，点击选择器，选项卡会弹出来。但是在做项目的时候出现一个bug，就是选项卡不见了，一开始以为是接口问题，没触发接口，经过一番检查发现是被弹框遮住了，然后网上搜索了一圈方法，又是z-inde什么的，好像对我这里不太有用，还是会出现被遮住的情况。 最后在 el-select 中加入transfer="true" :popper-append-to-body="false"！ 文章转自：el-select选项被遮挡 - 挽你手 - 博客园 感谢大佬提供方法，...
element-ui的el-select远程加载数据后被遮挡
xssxxssx的博客
07-13 323
可以通过使用debouncedOnInputChange() 方法重新计算el-select的可视范围 例：this.$refs.selectEmploy.debouncedOnInputChange()
【前端 layui问题解决】 下拉框select联动被table遮挡
热门推荐
weixin_37674775的博客
05-26 1万+
最近学习了前端的layui框架，感觉挺智能的 但是新人入坑总是会遇到一些比较让人棘手的事情 比如 select联动被table 遮挡住
VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决
HanXiaoXi_yeal的博客
07-27 5175
问题原因：elemrnt-ui会默认将弹出框插入至 body 元素；当设置了某个元素全屏时，会遮挡住原来的select下拉数据。 解决方法： <el-select v-model="value" placeholder="区域选择" :popper-append-to-body="false" //加入此行代码，完美解决 > ...
Select下拉框内容被百度编辑器UEditor挡住的解决办法
dingcai12003的博客
06-13 2108
当下拉框组件太靠近UEditor编辑器组件时候，下拉框会被覆盖掉，如下图： 解决办法 将下拉框放到一个div中，该div的style属性如下设置，注意z-index的值一定要大于等于10000，不然还是被覆盖，大概UEditor的层级是9999吧；还有一定要先设置position: relative;不然z-index不起作用。 <div class="form-group center-...
Element-ui中元素滚动时el-option超出元素区域的问题
12-01
复现场景, 看图 分析原因 为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 ...我最初想到的解决方案是通过css解决，通过popper-class属性给Select下拉框添加类名,然后用
element-ui中select组件绑定值改变,触发change事件方法
01-21
1.安装vuecli脚手架 2.终端输入 cnpm i element-ui -S ...import {Select,Option,Dialog,Button} from 'element-ui' Vue.use(Select) Vue.use(Option) Vue.use(Dialog) Vue.use(Button) // Vue.compon
vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具
08-05
vue 使用 element-ui 项目的一些工具方法、拓展自定义指令等 Custom Directives 对 element-ui 的一些组件做的拓展自定义指令工具 使用yarn包管理 提供指令： v-select-scroll: Select 组件监听滚动，以便做懒加载 v...
详解Element-UI中上传的文件前端处理
10-16
以下是一个示例，展示了如何使用 Element-UI 的 `el-dialog` 和 `el-upload` 组件组合，让用户选择本地 JSON 文件并加载到前端： 1. 定义一个变量 `jsonContent` 用于存储 JSON 文件内容。 2. 创建一个对话框（`el-...
el-dialog中el-select的层级问题
qq_44915607的博客
08-27 2572
<div class="ContentManagement"> <el-dialog title="" :visible.sync="dialogFormVisible"> <el-form-item label="是否上架:" prop="status"> <el-select v-model="ruleForm.status" placeholder="是否上架" po
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
蓝胖子的博客
04-07 2106
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
关于页面点击编辑弹窗后关闭在重新打开新增弹窗下拉框表单验证提示不消失问题
qq_57826511的博客
04-01 1570
解决方法： dialog对话框，添加 destroy-on-close 属性；(html 第4行) 表单校验 trigger 的值设置为 change(不是重点，change是值发生变化时触发校验)； 在新增点击事件里添加$nextTick()方法；(js 中第19行) 在$nextTick方法里调用表单里的 clearValidate() 方法。(js 中第20行) <el-button @click="addDialogForm">打开新增弹窗</el-button&gt..
安卓多个 dialog的层级问题_一招解决Tinymce在el-dialog中下拉框使用异常
weixin_29053577的博客
02-03 1573
前言：在项目开发维护过程中，由于需要富文本编辑器，经过对比wangEidtor、quill等多个富文本编辑器，发现TinyMce富文本编辑器是最合适的，使用体验也是最好的；而且支持移动端的使用，支持响应式布局。所以我在EuiAdmin开源项目中集成了Tinymce富文本编辑器。经过基本的配置，满足基础使用、且支持axios上传图片。但是还是存在一个问题，那就是当Tinymce富文本编辑器在elem...
element抽屉嵌套级联选择器，下拉框不显示
meimeib的博客
07-29 924
element抽屉嵌套级联选择器，下拉框不显示
element-ui框架的el-dialog弹出框被遮罩层挡住了
AC_Surprise的博客
03-12 1150
如图： 解决方法： 在el-dialog标签里添加 :modal-append-to-body='false’ 实现效果： 问题解析： 先来看看element-ui官网提供的属性说明文档 ** 文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了。 问题分析：经过分析源代码可得，el-dialog的显示层和遮罩层都设置了posit
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
07-28
在Element UI中，如果在el-dialog弹框中使用el-select下拉框，有时会遇到下拉框超出弹框的问题。这个问题可以通过设置弹框的`z-index`和下拉框的`popper-append-to-body`属性来解决。 首先，给el-dialog设置一个较大的`z-index`值，以确保弹框位于其他元素之上。例如： ```css .el-dialog { z-index: 9999; } ``` 接下来，在el-select下拉框中添加`popper-append-to-body`属性，并将其设置为`false`，这样下拉框就不会被追加到body元素中，而是保持在el-dialog内部。例如： ```html <el-select popper-append-to-body="false"> <!-- 下拉框的选项 --> </el-select> ``` 通过以上两步操作，应该能够解决el-select下拉框超出el-dialog弹框的问题。试试看吧！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值