✨ Element Plus 小技巧：用 collapse-tags 终结多选框的“选择困难症”！

✨ Element Plus 小技巧：用 collapse-tags 终结多选框的“选择困难症”！

嘿，各位前端小伙伴们！👋

在我们的日常开发中，下拉选择框 (el-select) 绝对是表单里的常客。而当需求升级，需要用户进行多项选择时，一个“甜蜜的烦恼”也随之而来：

如果用户选中的项目太多，我的选择框会不会被“撑爆”？ 🤯

想象一下，一个允许用户选择多个“标签”或“负责人”的场景。当用户热情地选择了七八个选项后，你的 el-select 输入框可能会变成这样：

[ 标签一 ] [ 标签二 ] [ 标签三 ] [ 标签四 ] [ 标签五 ] [ 标签六 ] ...

这不仅会让输入框变得无限长，挤压旁边的元素，甚至可能换行导致整个表单布局错乱。这简直是“像素眼”设计师和强迫症程序员的噩梦！😱

别担心，Element Plus 的设计者们早就为我们准备好了“解药”。今天，就让我们来认识一下这个专门拯救多选框颜值的神奇属性——collapse-tags！

💊 collapse-tags 是什么？

一句话概括：collapse-tags 是 el-select 组件在多选模式 (multiple) 下的一个 boolean 属性。它的作用就是，当已选项多于一个时，自动将多余的选项折叠起来，用一个简洁的 +N 标签来代替。

让我们来看一个直观的对比：

默认状态 (没有 collapse-tags) 🐢

<el-select v-model="value" multiple placeholder="请选择城市">
  <!-- ... options ... -->
</el-select>

当你选择了多个城市后，它会变成这样：
[ 北京 ] [ 上海 ] [ 广州 ] [ 深圳 ] (一个比一个长…)

开启 collapse-tags 之后 ✨

<el-select v-model="value" multiple collapse-tags placeholder="请选择城市">
  <!-- ... options ... -->
</el-select>

同样选择这四个城市，它会优雅地变成这样：
[ 北京 ] [ + 3 ] (清爽！整洁！宽度固定！)

看到了吗？无论你选择多少个选项，输入框的宽度都保持克制，只显示第一个选项和一个汇总数量的标签。那些“无处安放”的标签们，瞬间被“收纳”了起来。这对于保持表单的整洁和一致性简直是天赐福音！

🚀 如何优雅地使用它？

使用 collapse-tags 非常简单，但要用得“优雅”，你还需要认识它的黄金搭档——collapse-tags-tooltip。

黄金组合：collapse-tags + collapse-tags-tooltip

虽然 + 3 看起来很清爽，但用户可能会想：“我到底选了哪几个来着？” 🤔

这时候，collapse-tags-tooltip 就派上用场了。它也是一个 boolean 属性。

<template>
  <el-select
    v-model="selectedCities"
    multiple
    collapse-tags
    collapse-tags-tooltip
    placeholder="请选择城市"
    style="width: 240px"
  >
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref } from 'vue'

const selectedCities = ref([])
const cities = [
  { value: 'Beijing', label: '北京' },
  { value: 'Shanghai', label: '上海' },
  { value: 'Guangzhou', label: '广州' },
  { value: 'Shenzhen', label: '深圳' },
  { value: 'Chengdu', label: '成都' },
]
</script>

加上 collapse-tags-tooltip 之后，神奇的事情发生了：

当你的鼠标悬停在那个 + 3 标签上时，会弹出一个漂亮的浮层 (Tooltip)，里面会完整地列出所有被折叠起来的选项！

[ 鼠标悬停在 +3 上 ] 🖱️

浮层显示:

• 上海
• 广州
• 深圳

这简直是完美的组合！既保持了界面的整洁，又没有牺牲信息的完整性，用户体验直接拉满！💯

总结一下

属性	类型	默认值	作用
multiple	boolean	false	开启多选模式，是使用下面两个属性的前提。
collapse-tags	boolean	false	(核心) 将多个已选项折叠成 +N 的形式。
collapse-tags-tooltip	boolean	false	(最佳搭档) 鼠标悬停时，用浮层显示所有被折叠的选项。

什么时候使用？

在你的项目中，任何需要用户进行多项选择，且选项数量可能很多的场景，都应该毫不犹豫地用上这个黄金组合！例如：

• 选择多个负责人
• 分配多个角色/权限
• 打上多个商品标签
• 选择多个关联的医院/科室

下次再遇到多选框的布局问题，别再用 CSS (Cascading Style Sheets, 层叠样式表) 去苦苦挣扎了。试试 collapse-tags，让你的代码更简洁，让你的 UI (User Interface, 用户界面) 更优雅！

Happy Coding! ✨

---

---

附录：图表与思维导图总结

📊 表格总结：collapse-tags 属性黄金搭档

属性 (Attribute)	类型 (Type)	默认值 (Default)	核心作用 (Function)	推荐指数
multiple	boolean	false	开启多选模式	⭐⭐⭐⭐⭐ (前提)
collapse-tags	boolean	false	✨ 折叠标签为 +N	⭐⭐⭐⭐⭐ (核心)
collapse-tags-tooltip	boolean	false	🖱️ 悬停显示完整内容	⭐⭐⭐⭐⭐ (最佳搭档)

🗺️ Mermaid 流程图：UI/UX 决策流程

🔄 Mermaid 时序图：用户与组件的交互

🧩 更多 Mermaid 图表示例

状态图 (State Diagram): 多选框的显示状态

类图 (Class Diagram): el-select 属性的简化关系

实体关系图 (Entity Relationship Diagram): 选项与值的关系

🧠 Markdown 思维导图：collapse-tags 知识点全览

• Element Plus el-select 多选美化技巧
  • 核心痛点
    • 😫 多选模式下，已选项过多会导致输入框被撑开，影响 UI (User Interface, 用户界面) 布局。
  • 解决方案：collapse-tags 属性
    • 作用：将多个已选标签折叠成 [ 第一个选项 ] [ +N ] 的形式。
    • 类型：Boolean (布尔值)
    • 前提：必须在 multiple (多选) 模式下使用。
  • 黄金搭档：collapse-tags-tooltip 属性
    • 作用：当鼠标悬停在 +N 标签上时，通过 Tooltip (文字提示) 浮层显示所有被折叠的选项。
    • 效果：✨ 兼顾了界面的整洁性和信息的完整性，提升 UX (User Experience, 用户体验)。
  • 使用场景
    • 任何选项数量不固定的多选场景。
    • 示例：
      • 角色分配
      • 标签选择
      • 负责人选择
  • 总结
    • 使用 collapse-tags 和 collapse-tags-tooltip 组合，是解决多选框 UI 问题的最佳实践。