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

最新推荐文章于 2024-05-10 11:44:01 发布
最新推荐文章于 2024-05-10 11:44:01 发布
阅读量5.3k 收藏 6
点赞数 1
分类专栏： element-ui 文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J_mine/article/details/124067679
版权

最近接手个工程， 发现了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;
  }

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

暴躁的攻城狮!!!
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
elementUI中的el-select显示文字过长超出解决
kelongren99的博客
12-06 1599
* el-select超出省略显示 */
element中的el-select下拉框多选显示的tags文本内容过长导致显示溢出框外
m0_52769924的博客
04-16 246
【代码】element中的el-select下拉框多选显示的tags文本内容过长导致显示溢出框外。
【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题
Hi_MrXiao的博客
12-07 5387
使用el-select下拉组件时，当下拉框中的选项内容很长会自动撑开容器宽度，导致页面效果很不好。如果不想使用组件默认的样式效果（超出的文字隐藏，并且后面添加省略号）属性设置下拉弹出框自定义类型 customDropdown。想使用横向滚动条展示所有内容，可以再加上下面的样式代码。为false：不将下拉弹出框插入至 body 元素。1、首先设置el-select的属性。3、设置下拉框的宽度。
【vue】解决element-ui的el-select下拉框中选项内容太长问题
最新发布
m0_67841039的博客
05-10 1064
1.给下拉框设置最大宽度; 2.内容一行展示,不换行,多余部分显示省略号; 3.有省略号的那一行,加悬浮提示; 4.没有省略号的地方不加悬浮提示
解决el-select显示的内容不全
weixin_45880538的博客
01-22 3282
解决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 2048
el-select 下拉框内容被遮挡
el-select 内容显示不完整解决方法
weixin_42349215的博客
08-24 2568
:popper-append-to-body="false" /deep/ .el-select-dropdown__wrap.el-scrollbar__wrap{ margin-bottom: 0 !important; } 组件el-select会默认添加到body里面，因此只修改样式不能直接起作用，需要添加第一行！！！
el-select显示不全
Zing_ing的博客
01-06 557
【代码】el-select显示不全。
前端el-select下拉数据太长显示...鼠标浮上去显示全部
migexiaoliang的博客
07-31 8346
在使用element的select下拉框时，有时候数据过长需要显示省略号，鼠标移入显示全部文字的功能。
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model ... <el v-for=item key=item.value value=item.value label=item.label></el> </el> [removed] export default{ data() { return { options: [{ value: '01',
vue+elementUi+selsct+option之下拉菜单最后一项显示不全、问题、deep、less、sass、scss
06-08 2135
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>
日常开发记录--elementUI中的el-select下拉框多选显示的文本内容过长导致显示溢出框外...
machine_vision123的博客
05-26 1099
el-select 选中内容溢出框外解决方案： // my是自己创建的最外层类名 提高样式权重 .my .el-select__tags-text { display: inline-block; max-width: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .my ...
select2下拉框在模态框中无法正常显示的问题
m0_37158404的博客
12-09 1007
原因：select2的z-index值小于父容器的z-index值 设置select2的dropdownParent参数后，select2会根据据父容器的z-index值自动调整select2的z-index值 $("#org").select2({ language: 'zh-CN', dropdownParent: $('#orgBoxModal') }); $('#orgBoxModal')为下拉框所在模态框对应的jquery对象 ...
element-UI中select下拉框不能正确显示的问题
小太阳的博客
04-14 8013
场景：项目中人脸设备管理信息以表格的形式展示，一个人脸识别设备只能被绑定一次，所以下拉框只能显示未被绑定的设备名称（只要设备被绑定使用，后端返回的下拉框数据就会删掉这一条被绑定的数据），当表格数据需要编辑的时候，编辑和新增不一样，需要数据回显，那么回显的时候是拿不到当前设备的名称的，所以会回显id。因为未绑定的设备数据里面已经不存在当前这一条数据了。 需要用的是：element中的select选择...
el-select下拉框最后一行选项展示不全
m0_60067558的博客
10-29 722
【ElementUI】el-selsct下拉菜单最后一项显示不全，深度选择和穿透选择均无效_ColdCoder的博客-CSDN博客 有用有用！！！！！！！！！
el-select选择器点不动
07-25
您好！关于el-select选择器无法点击的问题，可能有几个原因导致。请您尝试以下几种解决方法： 1. 检查是否正确引入了element-ui组件库，并且引入了el-select组件。可以在代码中确认el-select组件是否正确使用。 2. 确保el-select组件的父级元素有足够的高度和宽度，以便显示和操作选择器。 3. 检查是否有其他覆盖在el-select上方的元素，例如遮罩层或其他浮动元素。如果有，请将其调整为不会遮挡el-select组件。 4. 检查是否正确绑定了数据源和绑定值。请确保el-select的options属性中有正确的选项列表，并且value属性指向正确的绑定值。 5. 如果以上方法都没有解决问题，可能是由于其他代码或样式冲突导致。您可以尝试在空白项目中单独测试el-select组件，以确定是否与其他部分代码有关。 如果以上方法仍然无法解决问题，请提供更多详细信息，例如代码片段或错误提示，以便我更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值