解决el-select超长选项时不出现横向滚动条问题

最新推荐文章于 2024-06-04 14:53:20 发布
最新推荐文章于 2024-06-04 14:53:20 发布
阅读量1.8k 收藏 12
点赞数 4
分类专栏： Vue 文章标签： vue el-select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/catfishlyf/article/details/119422721
版权

如果只设置组件下拉框的max-width，那么超长的选项超长默认会使用...进行隐藏，显示如图：
在这里插入图片描述

想要显示横向滚动条需要两个步骤
① 显示选项超长部分
② 将选项item的display属性设置成block
代码如下：

  <el-select v-model="value" placeholder="请选择" popper-class
最低0.47元/天 解锁文章
catfishlyf
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-select组件：当选项的内容很长的时候，如何出现横向滚动条问题 && “无数据“不展示
joe_324的博客
05-14 1257
<el-select size="mini" v-model="form.notesLinkName" :popper-append-to-body="false"... #app .el-select-dropdown { max-width: 500px; left: 0 !important; } #app .el-select-dropdown__item { display: inline-block; } #app .el-select-dropdown__item span
el-select 选项文字超长解决方案
金乌的博客
05-29 4658
2、:popper-append-to-body="false" 将 el-select 选项的内容移动 div#app 当中。2、样式不加 scoped, 设置 display: block;要点： 1、popper-class="my-select" 设置自定义class。要点： 1、popper-class="my-select" 设置自定义class。二、超长省略号显示，鼠标悬浮显示全部。
vue3 语法糖 element plus Select 选择器 下拉框数据过多页面卡顿做手动滚动条(针对表格多条下拉框 直接复制可用)
QD38854的博客
06-04 214
vue3 语法糖 element plus Select 选择器 下拉框数据过多页面卡顿做手动滚动条(针对表格多条下拉框 直接复制可用)
解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
温柔雨哥的博客
03-04 2185
目前遇到一个问题，在用el-select组件的时候，当选项的内容很长的时候，会撑开下拉菜单的宽度，过长导致满屏展示不下，这样影响美观。具体如下图所示： 具体如何解决呢 可以设置下拉菜单的最大宽度，然后文字超出时，出现横向滚动条。 代码如下： <style lang="scss"> .el-select-dropdown { max-width: 251px; } .el-select-dropdown__item { display: inline-block; } .el-selec
el-select 下拉框样式修改以及滚动条的坑
qq_40551628的博客
11-20 174
不要加scoped！
elementPlus el-tree-v2横向滚动问题
qq_52933936的博客
12-13 671
father{important;
elementui el-select修改单个样式或去掉滚动条
aiyang1214878408的博客
05-23 1567
场景 使用elementui的select组件时，有时候需要去修改下拉框的样式，可是当去修改时才发现问题： （下拉框el-select-dropdow和app是同级），如下图： 解决方案 那这种情况下我们在单个组件里面写scoped样式就无法生效，在全局写又会影响大所有的下拉框。翻阅文档发现为了不全局污染，select组件中，提供了一个popper-class属性（element-select），所以给select组件加上这个属性，就可以通过这个类下修改样式了。 // template popper-c
vue中el-select下拉框文字过长时，导致dropdown溢出问题，加入横向滑动条
qq_39111164的博客
08-18 2179
问题描述： 解决方法： Code： <el-select v-model="strengthForm.route" placeholder="" style=' width: 100%' @focus="getRouteNameList()" filterable popper-class="select-dropdown"> <el-option v-for="item in routeList" :key="item.key" :lab
el-scrollbar 隐藏横向滚动条
hudabao888666的博客
02-23 2206
el-scrollbar 隐藏横向滚动条
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面...
详解element-ui中el-select的默认选择项问题
10-16
本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个用于创建下拉选择列表的组件。它通常与`el-option`组件配合使用，`el-option`用于定义可选的...
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中.zip
07-31
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中
chromedriver-mac-x64_121.0.6167.184.zip
最新发布
07-31
chromedriver-mac-x64_121.0.6167.184.zip
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。.zip
07-31
【Java面试+Java技术文章汇总】 涵盖大部分Java程序员所需要掌握的核心知识。
资源管理的艺术：使用MySQL用户资源配额优化性能
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
2024版国内外期刊最全信息库（6万多本期刊）(全新整理)
07-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/140405010 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 数据指标说明 【包含主要内容】 学科分类状态 期刊语言微信公众号定价邮发代码 期刊名称 电话出版区域邮箱 影响因子[知网]复合影响因子简介 主管部门 出版地址网址自引率[知网]综合影响因子 主办单位 主编 投稿网址国内统一刊号所属分区 是否TOP编辑部 官网微信号官网国际标准刊号地址 传真微信公号期刊等级邮编 是否OA期/掼賁浙鎳验刊状态 是否综述
el-table 横向滚动条不出现
10-20
如果el-table的横向滚动条没有出现，可以尝试以下方法进行解决： 1. 确认el-table的宽度是否超出了其容器的宽度，如果没有超出，则不会出现横向滚动条。 2. 确认是否设置了el-table的固定列宽度，如果设置了固定列宽度，可能会导致el-table的宽度超出容器宽度，从而导致横向滚动条不出现。 3. 确认是否设置了el-table的最小宽度，如果设置了最小宽度，可能会导致el-table的宽度不足以触发横向滚动条的出现。 4. 确认是否设置了el-table的样式，可能会影响横向滚动条的出现。 如果以上方法都无法解决问题，可以尝试查看el-table的文档或者提问相关技术论坛获取更多帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值