信创国产化如何推动技术自主创新与安全保障的未来发展
2285
2022-09-04
Element UI - el-select(选择器)下拉多选菜单不换行显示
ElementUI 是一款很强大的组件,但是其中或许也有一些功能不满足我们的需求或者审美,比如本人今天遇到一个问题:当我使用select多选框多选的时候,下拉框被撑开了,这样不仅自身不美观,旁边的组件都很有可能受到布局影响!!!
下图为官方例子:
Ps:第二张图虽然显示在同一行内,但是数据不直观!
解决方案
很简单:超出隐藏,那么设置在哪呢?我看了下生成的DOM,发现了这样一组代码:
原来 Element 会把我们所选择的内容动态的添加在这组 DOM 里,那么下面就要设置了,原理很简单,给父级设置超出隐藏(注意不要放在当前组件 scoped 中哦,不会生效,除非穿透样式)。
// 在你的重置样式表内加入这段代码即可.el-select__tags { white-space: nowrap; overflow: hidden;}
效果图
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~