element plus dialog里面嵌套dialog，select选择器下拉列表不显示

最新推荐文章于 2024-08-24 16:45:02 发布
最新推荐文章于 2024-08-24 16:45:02 发布
阅读量267 收藏
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Raken12/article/details/141465476
版权

如题，双层dialog嵌套，选择器option不显示，看了半天，尝试了给select添加popper-class，然后设置index，不生效。后来问一个大佬（他肯定是把element 研究的透透的），给了我一个截图
在这里插入图片描述
说把这个设置成false就可以了，果然 成功了

Raken12
关注
el-select 组件下拉框被遮挡问题
学无的博客
09-28 9020
发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长 如下图： 解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...
vue3 - 实现element plus表格组件el-table动态增删行功能，可编辑每行内的表单数据字段实时修改更新，Table表格列表动态新增删除控制每行每列的动态数据，添加行编辑行删除行示例！
高级前端工程师
08-20 5397
vue3，element plus，table表格，el-table，表格组件，动态增删表格列表，表格动态添加/删除/编辑行，如何实现表格组件动态增加和移除每行，实现动态添加行/可编辑，表格动态添加或删除行，单元格里编辑input输入框，select下拉选择器框，动态新增一行后可修改里面的数据，动态添加可编辑行，可修改后不生效等点了保存按钮后再生效，延迟生效，编辑修改表格数据后暂时不生效而是等保存后再生效，自定义新增删除table表格的行，及可输入input及下拉框选择，新增一行在表格最后新增一行，单元格内
vue3在弹出窗表格动态添加/删除/编辑行
weixin_52830464的博客
06-17 349
【代码】vue3+el-table表格动态添加/删除/编辑行。
做项目过程中问题小汇总 | vue3 elementplus js
yavlgloss的博客
08-24 499
问题小汇总
解决element-Plus中 el-Select在el-Dialog中使用，刷新页面时会导致el-Select被遮挡问题
Jacob_vue的博客
06-02 383
在使用Element-Plus的组件时，很多情况下会在对话框内部使用组件。然而，由于会创建一个新的层级上下文(z-index),默认为2079，而组件本身的z-index值低于组件的z-index，这就会再刷新页面后导致的下拉选项被遮挡住，无法显示出来。在标签上加上popper-class属性，用于为组件自定义添加样式，此时就可以设置合适的z-index值来解决z-index值低于的问题。
el-select下拉框无法显示 elementplus踩坑日常
m0_58031031的博客
03-09 3027
检查是否element-plus版本过旧，至少要下载^1.0.2-beta.66 可以在package.json看到版本号。在el-select里面加入:popper-append-to-body="false"使用elementui的dropdown平替一下，这个成功解决了我的问题；如果报错是版本冲突可以用npm install --force解决。在使用el-select的时候参考了官方文档，但下拉框无法显示。安装不同版本的element-plus方式（部分适用）缺点：后续需要自己再调一下格式。
【element-ui】dialog中使用select，下拉列表被挡住
nefu1234的博客
04-28 6324
这个问题是因为下拉框层级太低被挡住了，修改层级就可以了 <el-dialog title="增加指标" :visible.sync="adddialogVisible" width="30%" center> <el-fo...
【element-ui】el-dialog中使用el-select，下拉列表被挡住的解决办法
热门推荐
Pluto
05-24 1万+
一开始以为没获取到列表数据，后来发现有， 只是下拉列表被模态框挡住了，定位到每次鼠标经过打开dialog的按钮时，dialog的层级都会递增； 后来找到element-ui中的源码的这一行： 发现这样dialog的层级就不会递增了（固定在2000），列表也能正常展示了。 但是不确定会不会对其他组件造成影响，目前还没发下，如果有问题再来更新。 这句代码的路径： ...
大事件管理系统（vue3）compositionAPI/pinia/pinia持久化处理/Element Plus/pnpm包管理器/Eslint+prettier/husky(Git hooks)
qq_66318904的博客
05-22 1296
在线演示：https://fe-bigevent-web.itheima.net/login接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835接口根路径： http://big-event-vue-api-t.itheima.net本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus一些优势
vue + vue-resource + element-ui项目中遇到的问题总结
ishell1021的博客
03-08 2247
运营智享遇到的问题(前端) vue + vue-resource + element-ui + vue-router + node.js + sass 1. el-table filter tag 使用filter-method处理数据过滤,当该标签下没有数据时标签切换不起作用 解决: 1.用el-table的filter-change方法处理过滤逻辑,而不用el-table-column...
element组件---Form
weixin_45343878的博客
08-07 1088
Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...
UG\NX二次开发 多少词汇量才能无障碍阅读开发帮助
王牌飞行员_里海的博客
04-24 2187
大家都知道UFUN的帮助是英文的，有的开发者抱怨看不懂，还有的开发者为了能看懂接口说明专门学英语，那么英语学成什么程度就能无障碍阅读接口文档？我比较好奇，所以专门将UF_MODL部分的ufun函数的接口说明，提取出单词以作统计。大家猜一猜无障碍阅读UF_MODL部分的内容，需要多少词汇量储备呢？
ElementUI 对话框el-dialog嵌套问题
weixin_44700621的博客
03-09 4798
ElementUI对话框组件嵌套显示出现父组件无法正常显示和子组件无法正常关闭问题解决方法
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-15 2642
el-select组件在一个弹框中，打开该弹框，el-select可以正常选中，但是保存弹框中的表单信息关闭弹框后，再打开弹框，出现select组件无法选中的问题。通过以上观察，很容易判断原因，那就是问题应该是出在el-dialog弹框上，而不是在select上，也就是关闭弹框时，弹框组件未销毁，有残留历史数据。免费答疑，行业深潜多年的技术牛人帮你解决bug。如上图，无法选中，但是所对应的data的值产生了变化，视图表现就是未选中状态。凡是要具体问题具体分析啊！解决方法就是彻底销毁该组件，用v-if即可。
ElementUI:多个Select下拉框存在时调整个别下拉框样式
weixin_38942919的博客
03-06 819
当dialog中存在多个下拉框的时候，想改变某一个下拉框的样式，于是给某一个select绑定类，发现并没有生效，换了一种方法，将el-select用div包裹，将类绑定在div上，也没有效果。 在控制台查看后发现，下拉框出现后与app同级 查阅ElementUI下拉框文档之后，在文档中提到popper-class，给下拉框添加类名，于是在需要改变样式的那个select下拉框绑定popper-class，用popper-class来自定义一个类 获取到类名之后，就能对想修改样式的下拉
element-UI中select下拉框不能正确显示的问题
小太阳的博客
04-14 8108
场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。 需要用的是：element中的select选择...
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
蓝胖子的博客
04-07 2310
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题
weixin_64482155的博客
12-13 6507
这应该也是不将弹出框插入至 body 元素之中的原因，所以就给el-select写个状态：全屏时popper-append-to-body为false,非全屏时为true。但在写完之后，发现还是不行，甚至又回到了没加popper-append-to-body的情况（全屏不显示下拉菜单）。在前两天进行页面全屏时，一切都还好好的，可当使用element-ui中的el-select时，下拉菜单却怎么也显示不出来，但只要退出全屏状态，立马就好。可随之而来新的问题产生，非全屏状态下，我的下拉菜单无法完全显示出来了！
element-plus dialog v-loading不生效
最新发布
10-18
Element Plus 的 `v-loading` 功能用于显示加载状态，通常当你请求数据时会在组件上显示一个加载动画。如果你发现它并没有正常显示，可能是以下几个原因： 1. **组件嵌套层级问题**：确保 `v-loading` 组件是在需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值