TinyVue BaseSelect 基础选择器实战：高效表单筛选利器详细教程

表单筛选利器：TinyVue BaseSelect 基础选择器实战指南

在筛选区、编辑表单和弹窗配置等场景中，选择器是最常用的表单控件之一。实际业务往往需要在单选与多选、本地选项与远程搜索、少量选项与海量数据之间灵活切换。如果每种模式都单独开发一套组件，样式统一、键盘行为对齐、清空逻辑一致性等问题将耗费大量精力。

TinyVue 的 BaseSelect（基础选择器）在标准 Select 组件基础上，针对表单场景中常见且棘手的痛点提供了集成解决方案：标签式与配置式两种写法、多选标签折叠、远程搜索、虚拟滚动、选项缓存等。下面按照实际接入流程，梳理如何在项目中快速上手。

两种写法：标签式与配置式

标签式适合需要自定义图标或精细控制每个选项的场景。通过 tiny-option 子组件声明选项，代码结构清晰，也便于扩展：

 复制代码

配置式则将选项列表交给 options 属性，模板更简洁，便于直接对接后端返回的 JSON 数据：

 复制代码

字段名默认使用 label 和 value，若后端返回的字段名不同（如 name 和 id），无需修改数据层，可通过 text-field 和 value-field 属性进行映射。

多选：标签、必选与数量限制

开启 multiple 属性后，v-model 绑定值变为数组，选中项以 Tag 标签形式展示，这是多选场景的标准做法。企业表单中常需额外关注以下需求：

 复制代码

• multiple-limit 配合 show-limit-text：限制最大可选数量，同时展示「已选 / 上限」提示，让用户清晰了解剩余可选项。
• required（在 option 或 options 项上配置）：可标记某些选项为必选，适用于「至少选一个角色」等场景。
• collapse-tags：多选时标签过多会占用输入框空间，折叠后界面更清爽；还可配合 show-proportion 显示每个选项的占比信息。

在多选搜索场景下，reserve-keyword 属性很实用：选中一项后不会清空搜索词，有利于连续筛选，提升操作效率。

搜索：本地过滤、面板搜索与远程加载

BaseSelect 在搜索能力上做了分层设计，可根据数据来源灵活选用：

远程搜索是实际开发中最高频的场景之一，代码实现非常直观：

 复制代码

如果需要允许用户创建不在列表中的条目，组合 allow-create 和 filterable 即可实现；default-first-option 支持用户按 Enter 直接选中第一个匹配项，操作效率进一步提升。

大数据量：虚拟滚动

选项数量达到万级时，普通渲染会导致下拉卡顿，严重影响用户体验。配置式下开启 optimization 即可启用虚拟滚动，性能提升立竿见影：

 复制代码

多选 + 大数据场景，建议同时开启 collapse-tags，并合理设置 multiple-limit，避免一次选中过多选项导致 DOM 节点爆增。官方示例中，10 万条选项滚动依然流畅，像城市选择、物料编码这类长列表场景，完全无需担心性能问题。

体验细节：清空、缓存与插槽扩展

单选场景下，clearable 提供一键清除功能，属于标配；clear-no-match-value 属性值得重点关注——当 v-model 的值在 options 中找不到匹配项时，会自动清空，避免脏数据被提交到后端。

配置式还支持 cache-op 本地缓存用户常选项，按点击频次或时间排序，在下拉中高亮展示。这招特别适合「最近使用的审批人 / 部门」这类高频字段，用户选择起来非常顺手。

插槽方面，prefix 可自定义输入框前缀（如添加搜索图标），footer 能在下拉底部扩展内容（如「新增条目」按钮），empty 自定义无数据时的展示；top-create 配合 @top-create-click 可在面板顶部放置新增入口，交互灵活性很高。

与 Dropdown、Select 如何区分

• BaseSelect：定位为表单字段，有明确的 v-model 绑定值，核心是选项选择与回显。
• Dropdown：更偏向动作列表，没有表单绑定语义，适合「操作」而非「选值」。
• Select：同族选择器，但 BaseSelect 提供了更完整的多选、虚拟滚动、缓存等企业级增强能力。新项目选型时，优先评估 BaseSelect 会更稳妥。

小结

BaseSelect 将单选、多选、搜索、远程加载、虚拟滚动和选项缓存统一收敛到同一组件中，标签式和配置式两种写法也照顾到了不同团队的模板习惯。实际接入建议：小数据量场景用配置式快速上线；远程字段先打通 remote-method；万级选项记得开启 optimization；多选表单提前规划好 collapse-tags 与 multiple-limit，布局和性能问题都能提前规避。