问题原因：elemrnt-ui会默认将弹出框插入至 body 元素；当设置了某个元素全屏时，会遮挡住原来的select下拉数据。
解决方法：
<el-select
v-model="value"
placeholder="区域选择"
:popper-append-to-body="false" //加入此行代码，完美解决
>VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决
2022-10-14
2395
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
VUE element-ui之页面全屏时el-select下拉菜单不显示问题解决
相关文章
|
4月前
|
存储
JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求，以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌（cancelToken），并在vuex中存储这些取消令牌的引用。当进行路由跳转时，通过路由守卫清除这些请求，达到取消上一个页面请求的目的。
232
2
2
|
3月前
|
JavaScript
API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
78
1
1
|
2月前
|
JavaScript
UED
"Vue实战技巧大揭秘：一招解决路由跳转页面不回顶部难题，让你的单页面应用用户体验飙升！"
【10月更文挑战第23天】在Vue单页面应用中，点击路由跳转时，默认情况下页面不会自动滚动到顶部，这可能影响用户体验。本文通过一个新闻网站的案例，介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法，实现路由跳转时页面自动滚动到顶部的功能，提升用户浏览体验。
149
0
0
|
3月前
|
JavaScript
前端开发
API
|
3月前
|
JavaScript
前端开发
安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中，保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听，我们可以增加用户查看和复制内容的难度，尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护，帮助开发者提升页面安全性。
591
0
0
|
3月前
|
JavaScript
API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
53
0
0
|
3月前
|
JavaScript
前端开发
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
34
0
0
|
5月前
|
JavaScript
如何在Vue页面中引入img下的图片作为背景图。../的使用
这篇文章介绍了在Vue页面中如何引入`img`目录下的图片作为背景图，提供了两种使用相对路径的方法。第一种是使用`../assets/img/`作为路径引入图片，第二种是使用`../../assets/img/`作为路径。文章还展示了使用这些方法的代码实现和效果展示，并鼓励读者学无止境。
283
0
0
|
5月前
|
JavaScript
开发者
UED
Vue.js组件库大对决：Element UI与Vuetify，开发者的罗密欧与朱丽叶！
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库，前者简洁高效，后者遵循Material Design，国际化程度高。两者均提供丰富的组件支持，但Vuetify组件更多样，设计更灵活；Element UI在性能和中文支持上更优。文档方面，Element UI更直观易懂，而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格，以达到最佳开发效果。
304
0
0
|
6月前
|
JavaScript
前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先，确保下载了项目源码，然后在项目根目录创建`home.html`作为新页面模板。接着，在`src`下建立`multiPage/home`目录，包含`App.vue`和`main.ts`文件以构建新页面。最后，更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后，项目将具备管理多个独立页面的能力。
151
4
4
热门文章
最新文章
1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
2
vue使用iconfont图标
3
vue3使用pinia中的actions，需要调用接口的话
4
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
5
【Vue.js】监听器功能（EventListener）的实际应用【合集】
6
Java最新图形化界面开发技术——JavaFx教程（含UI控件用法介绍、属性绑定、事件监听、FXML）
7
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
8
Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
9
「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
10
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
1
Qt第一课 第一个ui界面
121
2
如何启动flowable的Flowable UI画工作流程图
142
3
Element-ui快速入门
94
4
VUE里修改element-ui的显示层次与上下间隔
155
5
UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
48
6
Element-ui快速入门
109
7
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
498
8
Android UI底层绘制原理
74
9
【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
225
10
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
255