ElementUI内的el-select多选菜单不换行显示

最新推荐文章于 2024-09-05 10:04:51 发布
最新推荐文章于 2024-09-05 10:04:51 发布
阅读量1.5w 收藏 13
点赞数 4
分类专栏： 前端工程师 前端 文章标签： vue element select 超出隐藏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38514634/article/details/86505584
版权
本文讲述了在使用ElementUI的el-select组件时遇到的多选菜单被撑开问题，以及如何通过设置超出隐藏解决该问题，避免下拉框和搜索栏被撑开。解决方案是针对动态生成的DOM添加超出隐藏样式。
摘要由CSDN通过智能技术生成

ElementUI内的el-select多选菜单不换行显示

发现问题

ElementUI是一款很强大的组件，但是其中或许也有一些功能不满足我们的需求或者审美，比如本人今天遇到一个问题：当我使用select多选框多选的时候，下拉框被撑开了，嗯？？纳尼？？这样岂不是意味着我的搜索栏也要被撑开，这样是不行的，不如。。。
在这里插入图片描述

解决

这时候就需要我们自己动手来解决啦，很简单：超出隐藏，那么设置在哪呢？我看了下生成的DOM，发现了这样一组代码：
在这里插入图片描述
哦~原来element会把我们所选择的内容动态的添加在这组DOM里，那么下面就要设置了，原理很简单，给父级设置超出隐藏（注意不要放在当前组件scoped中哦，不会生效）：

// 在你的重置样式表内加入这段代码即可
.el-select__tags {
最低0.47元/天 解锁文章
没错就是小白
关注
专栏目录
让element-ui中el-select不换行的方式
VeraHsiang的博客
08-20 3468
在elementui中，使用select多选的方式，往往会把高度撑开了 我们查看console中，dom元素，发现产生如下元素，把高度给撑开了 解决方案如下： 在style中，增加如下css（不能在scoped中添加，在scoped中写不会生效） .el-select__tags { flex-wrap: nowrap; overflow: hidden; } 实现效果如下图： ...
el-select 多选框如何自适应宽度，不换行
weixin_57182748的博客
05-05 6045
el-select下拉框的宽度自适应，基于element框架的select进行重新处理，不改动源码，只调整部分样式
el-select使用collapse-tags的时候不换行
最新发布
newcode_的博客
09-05 436
el-select使用collapse-tags的时候不换行
Element UI - el-select（选择器）下拉多选菜单不换行显示
陆氪和他的那些代码
08-17 1万+
ElementUI 是一款很强大的组件，但是其中或许也有一些功能不满足我们的需求或者审美，比如本人今天遇到一个问题：当我使用select多选框多选的时候，下拉框被撑开了，这样不仅自身不美观，旁边的组件都很有可能受到布局影响！！！ 下图为官方例子： Ps：第二张图虽然显示在同一行内，但是数据不直观！ 解决方案 很简单：超出隐藏，那么设置在哪呢？我看了下生成的DOM，发现了这样一组代码......
element ui select多选组件 重构
05-03
element ui select多选组件 标签根据数据属性显示颜色不同, 至于plugins
Element ui 多选选择器 在 ie10下不会自动换行
莘栀的博客
12-29 820
Element ui 下拉框(多选)ie10下不会自动换行 下拉框部分代码： <el-select v-model="form.region" placeholder="请选择活动区域" multiple> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option>
【Element Ui】vue3 + elementplus el-select远程搜索 选项内容过长，要求不换行
alikami的博客
01-22 932
主要是tag标签的内容太长了，导致输入框到下一行了，但是不输入的时候空一行就会很奇怪。所以希望可以在同一行显示。
el-select 多选 添加collapse-tags之后换行问题
weixin_53558474的博客
09-28 3004
el-select 多选 添加collapse-tags之后换行问题
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-...
el-select 下拉框多选实现全选的实现
10-16
文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。 第一种方法是直接在下拉列表中添加一个“全选”选项。该选项是el-option组件，具有特殊的label值“全选”。当用户点击这个...
解决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-14
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
element plus 查询 默认不换行，点击展开收起操作
weixin_43962877的博客
03-29 632
element plus 查询 默认不换行，点击展开收起操作。
【element】el-select多选撑开原输入框高度并换行
Weiqian_的博客
04-12 5905
解决el-select多选撑开原输入框高度并换行
element-ui关于el-select选择框多选出框外的解决
m0_64707449的博客
11-03 2727
关于el-select选择框多选出框外的解决
el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法
热门推荐
qq_42780155的博客
06-03 2万+
使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容； 这样子很难看，样式还不整齐。 文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字： 就不会出现上述的情况了。 但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐： 看了上面的element元素发现： 这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！ css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…） word-break
el-select多选不换行
07-27
回答: 要实现el-select多选不换行的效果，你可以在el-select标签中加上class="selects"，然后在style中添加以下样式代码： ```css .selects .el-select__tags { display: flex; flex-wrap: nowrap; } .selects .el-select__tags-text { max-width: 80px; display: inline-block; overflow: hidden; vertical-align: bottom; text-overflow: ellipsis; } ``` 这样设置之后，多选的选项将会在同一行显示，并且超出最大宽度的选项会显示省略号。\[1\]\[3\]如果你想使用官方提供的代码，可以直接使用以下代码： ```html <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择" class="selects"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 这样也可以实现多选不换行的效果。\[2\] #### 引用[.reference_title] - *1* *2* [【element】el-select多选撑开原输入框高度并换行](https://blog.csdn.net/Weiqian_/article/details/130107339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-select 多选 添加collapse-tags之后换行问题](https://blog.csdn.net/weixin_53558474/article/details/126577918)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值