Vue 自定义筛选组件：3 种全选反选场景的优雅实现

在开发多选下拉、列表筛选等组件时，“全选 / 反选” 是高频需求 —— 但当叠加 “输入筛选” 功能后，场景会变得复杂：比如输入关键词后全选筛选结果、先选部分选项再筛选后反选等。

今天分享一套 自定义过滤 + 全选反选 的完整方案，核心是给每个选项加 isShow 控制显隐，轻松覆盖 3 种核心场景，代码可直接复用！

效果图

一、核心设计思路：用 isShow 掌控显示状态

所有逻辑的基础是 给每个选项定义 isShow 属性： 

• 未筛选时，所有选项isShow: true（全部显示）；

• 输入筛选时，通过自定义过滤方法修改 isShow（符合条件的显示，不符合的隐藏）；

• 全选 / 反选操作只作用于 isShow: true 的选项，避免操作隐藏项导致逻辑混乱。

二、3 种核心场景 & 功能详情

先明确我们