有关el-select选择器内容展示不完整的解决方案

最新推荐文章于 2026-03-24 00:21:03 发布
原创 最新推荐文章于 2026-03-24 00:21:03 发布 · 6.1k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#elementui #vue.js
本文讲述了作者在工程中遇到的el-select展示不完整问题，通过在HTML中添加属性和CSS样式调整，快速解决了滚动冲突，提供给需要的开发者解决方案。

最近接手个工程， 发现了el-select展示不完整；效果如下如图

应该是代码里有之前设置的默认样式导致； 不过由于时间太紧急，没来得及细细查找问题 而是采用了个简单粗暴的办法。 

1. 给el-select 标签上插入

 :popper-append-to-body="false"

2. css样式 里写

  ::v-deep .el-select-dropdown__wrap.el-scrollbar__wrap {
    margin-bottom: 0 !important;
  }

简单粗暴 ， 希望可以帮助到有需要的小伙伴 ！！！

Element UI实战：el-select超长选项文字显示不全？3种解决方案对比
weixin_29022115的博客
03-18 331
本文详细解析了Element UI中el-select组件处理超长选项文字的3种专业解决方案，包括动态宽度适配、高级CSS定制和虚拟滚动性能优化。针对不同业务场景，提供了从基础到进阶的实现方法，帮助开发者有效解决选项文字显示不全的问题，提升用户体验和界面美观度。
Element UI实战：el-select超长文本显示优化全攻略（附滚动条与省略号两种方案）
最新发布
weixin_30505225的博客
03-24 118
本文详细解析了Element UI中el-select组件处理选项文字超长问题的两种优化方案：滚动条与省略号显示。通过代码示例和性能分析，帮助开发者解决下拉菜单布局溢出、交互困难等常见问题，提升用户体验。特别适合Vue开发者在后台管理系统中处理长文本选项场景。
解决el-select显示的内容不全
weixin_45880538的博客
01-22 4473
解决el-select显示的内容不全 1.加:popper-append-to-body=“false” <el-select v-model="formValidate.type" placeholder="请选择父级类型" :popper-append-to-body="false" > 样式中加以下内容 /deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
el-select 下拉框内容被遮挡
qq_28586135的博客
04-24 2804
el-select 下拉框内容被遮挡
【ElementUI】el-selsct下拉菜单最后一项显示不全，深度选择和穿透选择均无效
ColdCoder的博客
05-17 4585
使用el-select下拉菜单时突然发现最后一项显示不完整，如下： 发现是margin值不合理导致的显示不全，在尝试使用::v-deep与/deep/选择修改下拉选项的margin-bottom: 0 !important，发现未有成效。 经过分析页面的DOM结构，el-select默认挂在在了body上，导致无法选中进行样式修改。 最后，通过设置:popper-append-to-body="false"字段，使el-select挂载在当前页面，即可进行选中修改样式。 <el-form-
解决el-select下拉框最底部显示不全的问题
zfkdiyi的博客
01-24 1630
看一下你的el-select有没有设置了 :popper-append-to-body=“false” 这个属性，如果有就把它删掉。删掉以后，底部就能显示完全了。
el-select显示不全
Zing_ing的博客
01-06 888
【代码】el-select显示不全。
el-select选择器数据回显时无法正确显示解决方案
weixin_68222693的博客
09-05 697
在前端开发中使用el-select进行选择是一个非常常用的开发手段，在一些业务逻辑中，我们通常需要用到复杂的数据类型(Object)来作为选择项。在使用el-select使用复杂数据类型作为Option的选项当数据回显时，如果el-option的label属性编写的不是item.label，例如：label=“item.name”则直接对el-select所绑定的值进行赋值时会出现input框内数据为空的情况。
element-ui 的 el-select 与 el-tree 的功能组合
YuJinpan的博客
11-04 1万+
文章目录简介使用安装对 element-ui 的依赖全局注册局部注册完整的实例组件 API属性事件 简介 element-ui 的 el-select 与 el-tree 组件的功能组合。 在线实例：https://yujinpan.github.io/el-select-tree/ 使用 安装 npm install --save el-select-tree 对 element-ui 的...
el-select 超长文本自适应展示优化方案
k6l7m8n9的博客
02-26 1007
本文针对Element UI中el-select组件选项文字超长导致显示不全的问题，提供了三种优化方案。从基础的同步宽度方法，到允许水平滚动的CSS样式覆盖，再到结合动态计算与屏幕空间检测的智能融合方案，逐步深入解决el-select超长文本的自适应展示难题，有效提升用户体验。
element-ui中select选择器怎么获取更换的数据
默默的笔记
06-14 1万+
选择器的使用一般分为在表格中和表格外两种方式，本文主要内容为element-ui组件下el-select控件的使用。 两种情况下选择器的效果展示 el-select选择器基本写法 更换数据的参数传递【重点】 一、两种情况效果展示 1、在表格中： 2、在表格外： 二、代码基本写法 1、表格中 <el-table-column prop="costSubjectD...
el-select 内容显示不完整解决方法
weixin_42349215的博客
08-24 2864
:popper-append-to-body="false" /deep/ .el-select-dropdown__wrap.el-scrollbar__wrap{ margin-bottom: 0 !important; } 组件el-select会默认添加到body里面，因此只修改样式不能直接起作用，需要添加第一行！！！
前端el-select下拉数据太长显示...鼠标浮上去显示全部
migexiaoliang的博客
07-31 1万+
在使用element的select下拉框时，有时候数据过长需要显示省略号，鼠标移入显示全部文字的功能。
【vue+element ui】大屏自适应中el-select下拉内容在低分辨率下显示不全问题解决
浪潮行舟_2136
02-28 1663
通过谷歌浏览器设置Toggle device toolbar为1028px*720px分辨率，下拉显示异常。使用F12对比查看，发现el-select中的el-select-dropdown__item是固定的；最近要把一个1920px*1080px的大屏改成自适应的；最低适配到1028px*720px；解决办法：将el-select-dropdown__wrap改大，让内容全部显示出来；将电脑屏幕改成1028px*720px分辨率后，下拉显示正常。全局设置，代码如下（项目中使用到的是scss）
Web前端之Vue+ElementUi+selsct+option实现下拉菜单最后一项显示不全、问题、deep、less、sass、scss
CSDN博客主页地址：https://mengjian.blog.csdn.net/
06-08 2523
Web前端之Vue+ElementUi+selsct+option实现下拉菜单最后一项显示不全、问题、deep、less、sass、scss
解决select选项内容过长，文字显示不全的问题
热门推荐
弃言不永
04-29 1万+
<br /><select class="ag-select" name="ag-select" id="ag-select" onmousedown="javascript: this.style.width='auto';" onblur="javascript: this.style.width=125;" onchange="javascript: this.style.width=125;"> <option value="">选择上级代理商</option> </select>
select2下拉框在模态框中无法正常显示的问题
m0_37158404的博客
12-09 1288
原因：select2的z-index值小于父容器的z-index值 设置select2的dropdownParent参数后，select2会根据据父容器的z-index值自动调整select2的z-index值 $("#org").select2({ language: 'zh-CN', dropdownParent: $('#orgBoxModal') }); $('#orgBoxModal')为下拉框所在模态框对应的jquery对象 ...
解决el-select比el-input短的问题
uaena的博客
05-06 1146
将el-form的:inline属性删除,你会发现select比input的宽度要窄,为了保证他们宽度一样, 在el-select上加上style=“width:100%” el-select中 <el-form-item label="第四块换行"> <el-select v-model="form.value4" style="width:100%" > <el-option></el-option>
vue-admin下拉框el-select最后一个显示不全，会出现margin-bottom: -17px；
qq_630354780的博客
08-29 422
问题所在是因为出现：margin-bottom: -17px;
element-UI中select下拉框不能正确显示的问题
小太阳的博客
04-14 8342
场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。 需要用的是：element中的select选择...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值