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

已于 2024-03-10 22:17:43 修改
阅读量4.1k 收藏 12
点赞数 12
文章标签： vue.js javascript 前端
于 2024-03-09 16:20:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 9971
发生这种问题的情况 1.当选择框处于页面边缘 2.它的父级又没有使用fixed 定位 3. 下拉框选项内容过长 如下图： 解决办法 1.element-ui 的el-select 的下拉框定位它会去判断父级是否有fixed 定位如果有那么下拉框也会是采用fixed 定位，这个时候回去判断浏览器的边框和 el-select 的位置去做定位从而不会超出浏览器。 2. 知道了上面的原理，解决办法就是给父级加fixed 定位，我们只要给父级加 fixed 定位不需要给...
前端开发el-select下拉框样式修改方案：解决背景色、hover及字体样式定制问题了文档的核心内容
04-05
文章首先介绍了网上常见的三种修改样式的方法及其存在的问题，接着深入分析了问题产生的原因，即el-select选项的容器不在挂载的div#app中，导致设置的样式无法正常作用。然后提出了解决方案——通过设置Popper-...
vue el-select 下拉框选择后,不显示
weixin_39891473的博客
12-13 3047
问过度娘后得知, 是因为数据层数太多, render函数没有更新,在select 里添加以下代码。使用forceUpdate手动强制刷新。
element-plus(vue3)表单el-select下拉框的远程分页下拉触底关键字搜索实现
最新发布
m0_58355897的博客
04-25 408
使用二、升级使用-二次封装组件定义// 查询下拉框的滚动容器// 判断是否滚动到底部// 触发绑定的回调函数// 使用防抖处理滚动事件// 设置防抖时间为300ms// 将防抖后的函数赋值给 el.userLoadMoreselectDom?});},},全局注册。
el-select下拉框不显示最新解决办法
qq_43268322的博客
08-02 526
由于popper-append-to-body已经被启用 通过文档发现现在改为了。:teleported="false"即可。所以只需要在el-select加上。
Vue3配置Element Plus：引用下拉框代码但是下拉框不显示
无面人的博客
07-18 1754
Vue3配置Element Plus：引用下拉框代码但是下拉框不显示
element-plus el-select选择器无法选中显示的内容
wy271013的博客
05-07 1123
函数没有自动更新，需手动强制刷新所以我直接强制刷新了值，而forceUpdate就是重新render。今天使用element ui的下拉选择框组件时，发现选中了值却没有显示在框中。出现这个问题好像是因为下拉框数据是循环别的接口得来的，因为数据层次太多，在选中事件加上 this.$forceUpdate()强制刷新即可。
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题
weixin_64482155的博客
12-13 7222
这应该也是不将弹出框插入至 body 元素之中的原因，所以就给el-select写个状态：全屏时popper-append-to-body为false,非全屏时为true。但在写完之后，发现还是不行，甚至又回到了没加popper-append-to-body的情况（全屏不显示下拉菜单）。在前两天进行页面全屏时，一切都还好好的，可当使用element-ui中的el-select时，下拉菜单却怎么也显示不出来，但只要退出全屏状态，立马就好。可随之而来新的问题产生，非全屏状态下，我的下拉菜单无法完全显示出来了！
el-select 下拉框多选实现全选的实现
10-16
文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。 第一种方法是直接在下拉列表中添加一个“全选”选项。该选项是el-option组件，具有特殊的label值“全选”。当用户点击这个...
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
这样，`el-select` 的下拉框就会显示`stateArr` 中的每个状态及其描述，用户可以根据需求选择。 除了基础的下拉框标签，还可以自定义`el-select` 的其他特性，例如： 1. **禁用选项**：通过在`el-option` 上添加`...
el-select下拉框选择后绑定值改变，显示不变 - 副本.md
04-28
el-select下拉框选择后绑定值改变，显示不变 - 副本
解决页面全屏时，element-plus el-select 下拉框不显示问题
weixin_74158961的博客
01-20 419
最后这里还判断了下是不是全屏状态，修改了下拉框的样式。添加属性:teleported="false"
el-select下拉框有数据无显示
qq_45371797的博客
04-24 2842
vue+element中el-select组件有数据不显示或者下拉框错位
el-select下拉选择不回显问题和下拉框显示数字问题
szzlh123456789的博客
02-04 3550
在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
蓝胖子的博客
04-07 2531
VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示（下拉框不显示无法选择）问题解决
element-plus el-dropdown下拉不显示
qq_45780616的博客
07-24 1239
解决：el-dropdown-menu元素外添加<template #dropdown>
element plus dialog里面嵌套dialog，select选择器下拉列表不显示
Raken12的博客
08-23 392
如题，双层dialog嵌套，选择器option不显示，看了半天，尝试了给select添加popper-class，然后设置index，不生效。后来问一个大佬（他肯定是把element 研究的透透的），给了我一个截图。说把这个设置成false就可以了，果然 成功了。
element-UI中select下拉框不能正确显示的问题
小太阳的博客
04-14 8185
场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。 需要用的是：element中的select选择...
使用Layui相关组件后，select下拉框无法显示
wingold_sky的博客
07-31 1768
select下拉框无法显示
element plus 下拉框回显
11-14
Element Plus是一个基于Vue 3和Ant Design Vue的UI库，它提供了一个名为`el-select`的下拉框组件。如果你想要实现在下拉框中显示预设值并实现回显的功能，可以按照以下步骤操作： 1. 首先，在HTML模板中引入`el-select`组件，并设置一个v-model绑定，用于数据双向绑定： ```html <template> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </template> ``` 2. 然后，在你的JavaScript或TypeScript文件中，定义`options`数组（即下拉框的选项列表），以及`selectedValue`变量来存储当前选择的值： ```javascript <script setup> import { ref } from 'vue'; const options = [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, // ...其他选项 ]; const selectedValue = ref(''); </script> ``` 3. 如果你想在页面加载时显示某个特定值，可以在`setup`钩子里初始化`selectedValue`： ```javascript setup() { const selectedValue = ref('option1'); // 初始化为默认值或其他选项值 // ... } ``` 4. 当用户通过下拉框选择新的值时，`selectedValue`会自动更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值