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 分钟前
基于Spring Boot和Vue的在线考试系统设计与实现
vue.js·spring boot·后端
ProgramHan5 分钟前
React 19 新特性深度解析:告别 useEffect 的时代
前端·react.js·前端框架
次元工程师!5 分钟前
Sa-Token完成路由鉴权
java·服务器·前端
IT_陈寒9 分钟前
Redis 7.0 实战:5个被低估但超实用的新特性,让你的QPS提升40%
前端·人工智能·后端
南玖i18 分钟前
SuperMap iServer + vue3 实现点聚合 超简单!
javascript·vue.js·elementui
web守墓人18 分钟前
【前端】ikun-pptx编辑器前瞻问题四:通过AI编写一个前端pptx编辑器
前端
泰勒疯狂展开19 分钟前
Vue3研学-标签ref属性与TS接口泛型
前端·javascript·vue.js
小二·19 分钟前
前端 DevOps 完全指南:从 Docker 容器化到 GitHub Actions 自动化部署(Vue 3 + Vite)
前端·docker·devops
忒可君19 分钟前
2026新年第一篇:uni-app + AI = 3分钟实现数据大屏
前端·vue.js·uni-app
Komorebi゛20 分钟前
【CSS】线性流动边框样式
前端·css·css3