el-select下拉框无法显示 elementplus踩坑日常

已于 2024-03-10 22:17:43 修改
阅读量4k 收藏 12
点赞数 12
文章标签： vue.js javascript 前端
于 2024-03-09 16:20:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58031031/article/details/136585949
版权

在使用el-select的时候参考了官方文档，但下拉框无法显示

解决办法1：检查是否没有按需引入eloption只引入了elselect

解决办法2：在el-select里面加入:popper-append-to-body="false"

<el-select
						:popper-append-to-body="false"
                        其他属性

解决办法3：使用elementui的dropdown平替一下，这个成功解决了我的问题；

缺点：后续需要自己再调一下格式

 参考文档：

组件 | Element

解决办法4：检查是否element-plus版本过旧，至少要下载^1.0.2-beta.66 可以在package.json看到版本号

安装不同版本的element-plus方式（部分适用）

修改package.json文件的版本号，npm install

如果报错是版本冲突可以用npm install --force解决

el-select 组件下拉框被遮挡问题
学无的博客
09-28 9887
发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长 如下图： 解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...
vue3 - 最新详细实现 “弹框式评论列表“ 无限下拉加载功能，鼠标滚轮到底时触发懒加载，将评论区讨论列表放到一个抽屉弹框中并监听鼠标滑动触底加载更多数据（详细示例代码，一键复制开箱即用）
高级前端工程师
07-03 1874
vue3，nuxt3，element Plus，评论区，列表，懒加载，无限下拉列表，实现评论列表懒加载，Vue3评论列表，vue嵌套在弹框里的评论区列表，多级留言/评论的功能实现，vue实现文章评论和回复列表，vue仿掘金评论列表，vue3评论区插件组件，Vue3 无限下拉滚动列表，下拉滚动分页，长列表滚动触底，vue3滚动底部加载更多数据，评论列表的详细示例代码，vue3之列表无限循环滚动效果，列表无限滚动的示例，评论列表触底加载，如何实现列表的鼠标滚动触底请求，vue3实现容器内容滚动到底,触底加载新数
点击el-select时，如果不满足操作条件，不能弹出下拉列表，同时要弹出错误提示
weixin_46190955的博客
09-03 380
【代码】点击el-select时，如果不满足操作条件，不能弹出下拉列表，同时要弹出错误提示。
【Element Plus下拉框值不更新：一个由异步时序引发的血泪教训】
最新发布
weixin_37342647的博客
03-04 987
定时器不是解决方案：setTimeout会引入不可预测性不要与框架对抗：Vue的响应式系统足够强大，应遵循其设计哲学保持数据流纯净：避免中间状态污染数据源信任Element组件：不要过度干预组件内部状态这个看似简单的bug耗费了笔者整整快一个下午时间，根本原因是对Vue响应式系统和Element组件机制的理解不够深刻。框架设计者的智慧 > 程序员的直觉官方文档的建议 > 临时hack方案当遇到诡异的问题时，不妨回归到最基础的响应式原理，用。
在element模态框select中选中option之后select无反应
热门推荐
weixin_41838204的博客
04-24 1万+
问题如下：模态框select中选中option之后select无反应要等点击取消或者确定是才可以有反应&lt;el-form-item label="类型：" :label-width="formLabelWidth" prop="type"&gt; &lt;el-select v-model="form.type" placeholder="请选择" @change="c
设置select禁止下拉
米二DeFans
03-01 7295
设置select禁止下拉 disabled=”disabled”
vue el-select 下拉框选择后,不显示
weixin_39891473的博客
12-13 3015
问过度娘后得知, 是因为数据层数太多, render函数没有更新,在select 里添加以下代码。使用forceUpdate手动强制刷新。
el-select下拉框不显示最新解决办法
qq_43268322的博客
08-02 492
由于popper-append-to-body已经被启用 通过文档发现现在改为了。:teleported="false"即可。所以只需要在el-select加上。
Vue3配置Element Plus：引用下拉框代码但是下拉框不显示
无面人的博客
07-18 1717
Vue3配置Element Plus：引用下拉框代码但是下拉框不显示
element-plus el-select选择器无法选中显示的内容
wy271013的博客
05-07 1100
函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。今天使用element ui的下拉选择框组件时，发现选中了值却没有显示在框中。出现这个问题好像是因为下拉框数据是循环别的接口得来的，因为数据层次太多，在选中事件加上 this.$forceUpdate()强制刷新即可。
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题
weixin_64482155的博客
12-13 7097
这应该也是不将弹出框插入至 body 元素之中的原因，所以就给el-select写个状态：全屏时popper-append-to-body为false,非全屏时为true。但在写完之后，发现还是不行，甚至又回到了没加popper-append-to-body的情况（全屏不显示下拉菜单）。在前两天进行页面全屏时，一切都还好好的，可当使用element-ui中的el-select时，下拉菜单却怎么也显示不出来，但只要退出全屏状态，立马就好。可随之而来新的问题产生，非全屏状态下，我的下拉菜单无法完全显示出来了！
解决页面全屏时，element-plus el-select 下拉框不显示问题
weixin_74158961的博客
01-20 355
最后这里还判断了下是不是全屏状态，修改了下拉框的样式。添加属性:teleported="false"
el-select下拉框有数据无显示
qq_45371797的博客
04-24 2821
vue+element中el-select组件有数据不显示或者下拉框错位
el-select下拉选择不回显问题和下拉框显示数字问题
szzlh123456789的博客
02-04 3457
在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
蓝胖子的博客
04-07 2505
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
element-plus el-dropdown下拉不显示
qq_45780616的博客
07-24 1169
解决：el-dropdown-menu元素外添加<template #dropdown>
element plus dialog里面嵌套dialog，select选择器下拉列表不显示
Raken12的博客
08-23 368
如题，双层dialog嵌套，选择器option不显示，看了半天，尝试了给select添加popper-class，然后设置index，不生效。后来问一个大佬（他肯定是把element 研究的透透的），给了我一个截图。说把这个设置成false就可以了，果然 成功了。
element-UI中select下拉框不能正确显示的问题
小太阳的博客
04-14 8167
场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。 需要用的是：element中的select选择...
使用Layui相关组件后，select下拉框无法显示
wingold_sky的博客
07-31 1752
select下拉框无法显示
点击el-select下拉框中显示表格
07-28
要在el-select下拉框中显示表格，你可以使用el-table组件作为下拉框的下拉内容。以下是一个示例代码： ```html <template> <div> <el-select v-model="selectedOption" @change="handleSelectChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-table :data="item.tableData" border> <el-table-column prop="column1" label="Column 1"></el-table-column> <el-table-column prop="column2" label="Column 2"></el-table-column> <!-- 添加更多表格列 --> </el-table> </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: 'Option 1', tableData: [ { column1: 'Data 1-1', column2: 'Data 1-2' }, { column1: 'Data 2-1', column2: 'Data 2-2' }, // 添加更多表格数据 ] }, // 添加更多选项 ] } }, methods: { handleSelectChange(value) { console.log('Selected option:', value); } } } </script> ``` 在上面的示例代码中，el-select组件绑定了`selectedOption`属性，用于存储当前选择的选项。每个选项使用el-option组件进行渲染，其中包含一个el-table组件作为下拉内容。el-table的数据由`item.tableData`提供，每个选项可以有不同的表格数据。你可以根据需要自定义表格列和数据。 当选择项发生变化时，可以通过监听`change`事件来执行相应的处理逻辑。在示例代码中，我们在`handleSelectChange`方法中简单地打印出当前选择的选项值。 希望这个示例能帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值