Vue:下拉框多选影响行高

目录

  • [一、 出现场景](#一、 出现场景)
  • [二、 解决方案](#二、 解决方案)

一、 出现场景

在使用el-select增加multiple属性进行多选时,会出现高度塌陷的情况

二、 解决方案

首先需要在el-select中增加collapse-tags属性,并在style中增加如下样式

方案一

html 复制代码
<style scoped>
::v-deep .el-select .el-tag {
  width: 60px;
}

::v-deep .el-select .el-tag:last-child {
  width: auto !important;
}
</style>

方案2

html 复制代码
<style scoped>
::v-deep .el-select__tags-text {
  max-width: 60px !important;
}
</style>
相关推荐
是罐装可乐2 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖2 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
武昌库里写JAVA2 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温2 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯2 小时前
日常小常识记录
前端
那一抹阳光多灿烂2 小时前
CSS 编码规范
前端·css
degree5202 小时前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・2 小时前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'2 小时前
纯`css`固定标题并在滚动时为其添加动画
前端·css