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

本文讲述了在使用ElementUI的el-select组件时遇到的多选菜单被撑开问题,以及如何通过设置超出隐藏解决该问题,避免下拉框和搜索栏被撑开。解决方案是针对动态生成的DOM添加超出隐藏样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

发现问题

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

解决

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

// 在你的重置样式表内加入这段代码即可
.el-select__tags {
   
   
  white-space: nowrap;
  overflow
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值