Vue3 + Ant Design Vue 实现多选下拉组件（支持分组、搜索与标签省略）

在前端开发中，多选下拉组件 是常见的 UI 组件。
尤其是在需要支持搜索、分组过滤、选项自定义显示的场景，如何设计一个通用、高可复用的组件就显得非常重要。

本文将基于 Vue3 + TypeScript + Ant Design Vue，演示如何实现一个 多选下拉组件，并提供可扩展的设计思路。

一、功能需求

1. 支持单选和多选模式

2. 支持搜索过滤：用户可输入关键词快速筛选选项

3. 支持分组/类别过滤：一旦选择某类别，后续选择仅允许同类

4. 自定义选项展示：可显示额外信息，如类别、描述等

5. 多选超出显示省略：例如选择超过 1 个显示 +N

6. 数据来源灵活：可从全局 store 或远程接口获取

二、组件设计思路

• 使用 <a-select> 渲染下拉选择框

• 利用 slot="option" 自定义选项显示样式

• 使用 computed 生成动态选项

• 使用 computed 或方法实现分组过滤逻辑

• 搜索过滤通过 filter-option 自定义

• 多选超出显示通过 max-tag-count 和 max-tag-placeholder

三、关键技术解析

1. 分组过滤逻辑

const categoryGroup = (category: string) => {if (category === "A" || category === "B") return "Group 1";if (category === "C") return "Group 2";return "Other";
};const filteredOptions = computed(() => {if (!selected