el-select组件：当选项的内容很长的时候，如何出现横向滚动条问题 && “无数据“不展示

最新推荐文章于 2024-09-13 14:26:42 发布

joe_324

最新推荐文章于 2024-09-13 14:26:42 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/joe_324/article/details/116798160

版权

当el-select组件的选项内容过长时，如何配置使其出现横向滚动条，并探讨在无数据情况下如何阻止'无数据'显示的方法。

摘要由CSDN通过智能技术生成

<el-select size="mini" v-model="form.notesLinkName" :popper-append-to-body="false"...

#app .el-select-dropdown {
   
  max-width: 400px;
  left: 0 !important;
  box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 10%);
}
#app .el-select-dropdo

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

joe_324

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

catfishlyf的博客

08-05

1969

如果只设置组件下拉框的max-width，那么超长的选项超长默认会使用...进行隐藏，显示如图：想要显示横向滚动条需要两个步骤 ① 显示选项超长部分 ② 将选项item的display属性设置成block 代码如下： <el-select v-model="value" placeholder="请选择" popper-class="my-select-dropdown"> <el-option v-for="item in options" :ke

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...

参与评论您还未登录，请先登录后发表或查看评论

vue中el-select下拉框文字过长时，导致dropdown溢出问题，加入横向滑动条

qq_39111164的博客

08-18

2241

问题描述：解决方法： 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

Element plus 表单中下拉框的空值问题

最新发布

Bjnsfxs的博客

09-13

562

在表单中，有时候会碰到查询条件需要用下拉框来区分的时候，比如需要区分全部 | 启用 | 停用三个状态，这时一般会给全部的value值设置为''，但是这样会导致下拉框无法选中对应的全部选项。在el-select上有个属性empty-values，值是一个数组，用来表明哪些值是空值，即被认为是没选中状态的值，默认是['', null, undefined]，我们可以自行配置为[ null, undefined]，这样空值会被选中为全部

【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题

Hi_MrXiao的博客

12-07

6981

使用el-select下拉组件时，当下拉框中的选项内容很长会自动撑开容器宽度，导致页面效果很不好。如果不想使用组件默认的样式效果（超出的文字隐藏，并且后面添加省略号）属性设置下拉弹出框自定义类型 customDropdown。想使用横向滚动条展示所有内容，可以再加上下面的样式代码。为false：不将下拉弹出框插入至 body 元素。1、首先设置el-select的属性。3、设置下拉框的宽度。

el-select 选项文字超长解决方案

金乌的博客

05-29

5667

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。二、超长省略号显示，鼠标悬浮显示全部。

关于select的横向滚动条

leafe920的专栏

11-15

3907

写了一个弹出框是一个table 只有一tr 第一个td是填选择条件然后在第二个td里面展示第二个td里面是一select 是一个设置了size的下拉框，也就是说选项是显示出来的不用下拉 Java代码 'gongcheng' size='10' name='gongcheng' > .....

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题

weixin_30381793的博客

04-09

3951

我用的element-ui是V1.4.3. 目前遇到一个问题，在用el-select组件的时候，当选项的内容很长的时候，会撑开下拉菜单的宽度，这样影响美观。具体如下图所示：解决这个问题的思路：设置下拉菜单的最大宽度，然后文字超出时，出现横向滚动条。解决时的问题就是，设置了宽度，横向滚动条却不出现，如下图所示，直接将超出的文字隐藏，并且后面添加省略号最后我添加了如下的代码： .el-se...

element el-scrollbar 横向滚动条问题解决以及随后引发的下拉框问题修复

热门推荐

h18820956011的博客

08-06

1万+

在使用vue时，就会有使用到elementUI，之后就是不断的在入坑和天坑之间徘徊。 elementUI中有个隐藏的组件，就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码这里用F12可以查看到添加之后会有出现横向滚...

Element组件 el-select设置滚动条+滚动加载(两种写法: 原生Js和自定义指令)

weixin_46022934的博客

05-16

2543

敬请期待(2024-05-16 23:55)使用自定义指令和usehooks写法的功能出现;希望自己的写法可以帮助到遇到问题的人。有不足之处,或者可以优化的地方,欢迎大家给出自己的建议，会从大家的建议中汲取营养，提升自己!!!

select 横向滚动条

03-17

然而，当选项过多时，传统的垂直滚动方式可能不够直观，这时就需要引入横向滚动条，使得用户能方便地浏览并选择长列表中的项目。首先，要实现`<select>`元素的横向滚动条，我们需要理解HTML和CSS的基本原理。HTML...

vue select选择下拉组织树，解决不出现横向滚动条

weixin_46567616的博客

11-28

1039

注意：groupList为组织结构的数据，具体情况结合自己的项目。背景：由于项目需求需要使用下拉选择框的组织架构树。才正常出现横向滚动条。

封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目

金乌的博客

05-18

8091

表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value（code）值。二、el-option-node.vue。三、utils index.js。Step2：创建两个文件。一、Select.vue。

多个简单select结果横向拼接

obgnahs的专栏

03-26

2526

with t1 as (select 1 as a from dual), t2 as (select 2 as b from dual) select * from t1, t2 参考：https://segmentfault.com/q/1010000006725066?_ea=1110102

JavaScript解决select下拉框中的内容太长显示不全的问题

jrrfgj的博客

11-15

2304

JavaScript解决select下拉框中的内容太长显示不全的问题

el-select 和 el-option长度和样式修改

m0_61601708的博客

11-27

2093

【代码】el-select 和 el-option长度和样式修改。

Element VUE修改 el-input和el-select长度

心寒的博客

04-11

5675

Element VUE修改 el-input和el-select长度

element级联选择器的下拉选项太长了解决方法

zailaisanwan的博客

12-25

1132

去src下的assets下的css下的global.css添加样式即可解决 .el-cascader-panel { height: 300px; }

el-tree组件中当节点内容超过长度显示横向滚动条

06-07

要在 el-tree 组件中让节点内容超过长度时显示横向滚动条，你可以设置 el-tree 的样式： ```css .el-tree-node__label { white-space: nowrap; /* 防止内容换行 */ overflow-x: auto; /* 显示横向滚动条 */ max-width: 200px; /* 设置最大宽度 */ } ``` 其中，`white-space: nowrap;` 表示防止节点内容换行；`overflow-x: auto;` 表示当节点内容超出容器宽度时，显示横向滚动条；`max-width` 属性设置最大宽度，可以根据实际需求进行调整。这样就可以实现 el-tree 的横向滚动显示了。