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>
相关推荐
codeGoogle8 分钟前
Vue3 UIKit 实战:把聊天、会话、主题和移动端适配全部封装好
前端
大龄秃头程序员40 分钟前
iOS Method Swizzling 的工程化实践:如何处理多重交换与第三方冲突
前端
liangshanbo121544 分钟前
Webpack 文件指纹面试题整理
前端·webpack·node.js
xieter1 小时前
【技术精选】Node.js 核心事件循环机制与异步 I/O 深度剖析 (2026-10-02)
前端·javascript
计算机魔术师1 小时前
Ethan Mollick 谈点与群:智能体自组织为何让管理假设失效
前端
想吃火锅10051 小时前
【leetcode】238.除了自身以外数组的乘积js
javascript·算法·leetcode
故七月2 小时前
GEO 信源评估体系:如何判断一条网页信源能否被大模型采信
前端·网络·人工智能
liangshanbo12152 小时前
Webpack 常见 Plugin 面试题
前端·webpack·node.js
xxwl5852 小时前
vue3的入门学习
前端·vue.js·学习
用户847172102842 小时前
.shot 文件格式规范
前端·后端