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>
相关推荐
叁两5 分钟前
用opencode打造全自动公众号写作流水线,AI 代笔太香了!
前端·人工智能·agent
golang学习记10 分钟前
GitLens 十大神技:彻底改变你在 VS Code 中的 Git 工作流
前端·后端·visual studio code
SuperEugene11 分钟前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js
兆子龙14 分钟前
WebSocket 入门:是什么、有什么用、脚本能帮你做什么
前端·架构
csdn飘逸飘逸14 分钟前
Autojs基础-全局函数与变量(globals)
javascript
是一碗螺丝粉18 分钟前
LangChain 链(Chains)完全指南:从线性流程到智能路由
前端·langchain·aigc
KKKK23 分钟前
手写Promise,从测试用例的角度理解
javascript
月弦笙音23 分钟前
【浏览器】这几点必须懂
前端
青青家的小灰灰24 分钟前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
SuperEugene24 分钟前
弹窗与抽屉组件封装:如何做一个全局可控的 Dialog 服务
前端·javascript·vue.js