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>
相关推荐
ByteCraze6 分钟前
手写高性能虚拟列表(详解!!!)
javascript·学习
M ? A12 分钟前
Vue转React最佳工具对比:Vuera、Veaury与VuReact
前端·javascript·vue.js·经验分享·react.js
We་ct17 分钟前
JS手撕:函数进阶 & 设计模式解析
开发语言·前端·javascript·设计模式·面试·前端框架
悟空瞎说32 分钟前
前端老鸟实战:纯 CSS 实现小红书「真・瀑布流」,零 JS、自动错落、生产可用
前端
yuki_uix33 分钟前
当 reduce 遇到二维数据:从"聚合直觉"到"复合 Map"的思维跃迁
前端·javascript·面试
我叫黑大帅36 分钟前
Vue3中的computed 与 watch 的区别
前端·javascript·面试
暗不需求38 分钟前
# 一文搞懂 JavaScript 内存机制:从栈和堆,到闭包为什么“活得更久”
前端·javascript
CharlesY38 分钟前
JavaScript HTML5 Cache Manifest:离线应用缓存机制考古
前端·javascript
yuki_uix38 分钟前
前端解题的 6 个思维模型:比记答案更有用的东西
前端·面试
Bigger1 小时前
第三章:我是如何剖析 Claude Code 工具系统与命令执行机制的
前端·claude·源码阅读