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>
相关推荐
橙露12 分钟前
Webpack/Vite 打包优化:打包体积减半、速度翻倍
前端·webpack·node.js
chushiyunen16 分钟前
python中的魔术方法(双下划线)
前端·javascript·python
楠木68531 分钟前
从零实现一个 Vite 自动路由插件
前端
终端鹿42 分钟前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js
进击的尘埃1 小时前
Signals 跨框架收敛:TC39 提案、Solid、Angular、Preact 的实现差异与调度策略对比
javascript
程序员陆业聪1 小时前
工程师的瓶颈,已经不是代码了
前端
毛骗导演1 小时前
@tencent-weixin/openclaw-weixin 源码ContextToken 持久化改造:实现微信自定义消息发送能力
前端·架构
爱丽_1 小时前
Pinia 状态管理:模块化、持久化与“权限联动”落地
java·前端·spring
进击的尘埃1 小时前
从多仓到 Monorepo 的渐进式迁移:Git 历史保留、依赖收敛与缓存调优
javascript
SuperEugene2 小时前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript