Appearance
Select 选择器组件是基于 Element Plus 的 el-select 和 el-option 组件封装而成，提供了更简洁的配置方式，支持通过 options 数组快速生成下拉选择框。
INFO
Select 组件完全继承了 Element Plus Select 组件的所有属性和事件，因此支持所有 Element Plus Select 组件的功能，包括多选、可搜索、可清空、远程搜索等高级特性。
基础用法
通过 options 数组配置选项，使用 v-model 进行双向绑定。组件会自动将 options 数组渲染为下拉选项列表。
- 默认值
可以通过 v-model 绑定一个初始值，该值必须对应 options 中某个选项的 value 值。组件会自动选中对应的选项。
- 禁用选项
在 options 数组中，可以通过设置 disabled: true 来禁用某个选项。禁用的选项将无法被选中，并且会显示为灰色。
loading
多选模式、筛选、远程搜索
TIP
- 多选：通过设置
multiple属性可以启用多选模式。 - 搜索: 通过配置
filterable属性可以实现过滤。
loading
自定义选项内容
组件支持两种方式自定义选项的显示内容：
方式一：通过 options 中的 h 函数
在 options 数组中，可以为某个选项设置 h 函数来自定义渲染。h 函数接收两个参数：option（当前选项对象）和 h（Vue 的渲染函数）。
这种方式适合需要完全自定义选项渲染逻辑的场景，可以返回任何 Vue 组件或元素。
方式二：通过 template 插槽
使用 option-{slotName} 格式的插槽来自定义选项内容。例如 option-default 对应 el-option 的 default 插槽。
插槽会接收一个作用域参数 { option }，包含当前选项的所有信息。
这种方式适合简单的样式定制或内容调整，代码更简洁易读。
loading
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
options | Array | [] | 选项列表，每个选项是一个对象，详见下方 options 选项配置 |
modelValue / v-model | String | Number | Array | undefined | 绑定值，当前选中的值，必须对应 options 中某个选项的 value。多选模式下应为数组 |
placeholder | String | '请选择' | 输入框占位文本 |
options 选项配置
options 数组中的每个选项对象支持以下属性：
| 属性名 | 类型 | 必填 | 说明 |
|---|---|---|---|
label | String | 是 | 选项的显示文本 |
value | String | Number | 是 | 选项的值，必须唯一，用于标识该选项 |
disabled | Boolean | 否 | 是否禁用该选项，默认为 false |
h | Function | 否 | 自定义渲染函数，接收 (option, h) 两个参数，返回 VNode。如果设置了此函数，将使用此函数渲染选项，忽略其他配置 |
| 其他属性 | - | - | 支持透传 Element Plus el-option 组件的所有属性 |
TIP
value的值类型可以是字符串或数字，但必须与modelValue的类型保持一致- 除了上述属性外，
options中的每个选项对象还支持透传 Element Plusel-option组件的所有属性和事件 - 组件支持透传 Element Plus
el-select组件的所有属性，如multiple（多选）、clearable（可清空）、filterable（可搜索）、size（尺寸）等
插槽说明
组件支持通过插槽自定义选项的显示内容。插槽命名规则为 option-{slotName}，其中 slotName 对应 Element Plus el-option 组件的插槽名称。
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
option-default | 自定义选项内容 | { option } - 当前选项对象，包含 label、value 等所有选项属性 |
TIP
- 插槽名称必须以
option-开头，后面的部分会作为el-option的插槽名 - 插槽会接收
{ option }作为作用域参数，可以在模板中访问当前选项的所有属性 - 如果同时设置了
h函数和插槽，h函数的优先级更高
事件说明
| 事件名 | 说明 | 回调参数 | 触发时机 |
|---|---|---|---|
change | 绑定值变化时触发的事件 | (value: String | Number | Array) - 选中的值 | 当用户选择不同的选项时触发 |
update:modelValue | 绑定值更新时触发（用于 v-model 双向绑定） | (value: String | Number | Array) - 新的值 | 当 modelValue 值发生变化时触发，用于实现双向绑定 |
TIP
change事件会在用户交互时触发，而update:modelValue事件会在值更新时触发（包括程序修改值的情况）- 组件完全兼容 Element Plus Select 的所有事件，可以参考 Element Plus Select 文档 了解更多事件
高级功能
由于组件完全继承了 Element Plus Select 的所有功能，因此支持以下高级特性：
可清空
通过设置 clearable 属性，可以在选择框右侧显示清空按钮，点击后可以清空已选择的值。
可搜索
通过设置 filterable 属性，可以启用搜索功能，用户可以通过输入关键词来过滤选项。
远程搜索
通过设置 filterable 和 remote 属性，可以实现远程搜索功能，选项数据可以从服务器动态加载。
自定义选项模板
组件支持两种方式自定义选项内容：
通过 options 中的 h 函数：在选项对象中设置
h函数，使用 Vue 渲染函数完全自定义选项的渲染逻辑。通过 template 插槽：使用
option-{slotName}格式的插槽（如option-default）来自定义选项内容。插槽接收{ option }作为作用域参数。
分组
通过设置 options 中的 options 属性，可以实现选项分组功能。
注意事项
值绑定：
- 使用
v-model进行双向绑定，这是推荐的方式 modelValue的值必须对应options中某个选项的value值value和modelValue的类型必须保持一致（都是字符串或都是数字）- 多选模式下，
modelValue必须是一个数组
- 使用
选项配置：
options数组中的每个选项必须包含label和value属性value值必须唯一，不能重复- 如果某个选项的
value与modelValue匹配，该选项会被自动选中
Element Plus 兼容性：
- 组件完全兼容 Element Plus Select 的所有功能和 API
- 可以参考 Element Plus Select 文档 了解更多高级用法
- 支持透传 Element Plus
el-select和el-option的所有属性和事件
性能优化：
- 如果选项列表很大（超过 1000 条），建议使用虚拟滚动或分页加载来优化性能
- 可以使用
filterable和remote实现远程搜索，减少一次性加载的数据量
常见问题
Q: 为什么我的选择框无法选中？
A: 请检查以下几点：
- 确保
modelValue的值对应options中某个选项的value值 - 确保
value和modelValue的类型一致（都是字符串或都是数字） - 检查是否有选项被设置为
disabled: true - 多选模式下，确保
modelValue是一个数组
Q: 如何实现多选功能？
A: 设置 multiple 属性即可启用多选模式，同时确保 v-model 绑定的值是一个数组。
Q: 如何实现搜索功能？
A: 设置 filterable 属性即可启用搜索功能，用户可以通过输入关键词来过滤选项。如果需要远程搜索，还需要设置 remote 属性。
Q: 如何自定义选项的显示内容？
A: 组件支持两种方式自定义选项内容：
通过 options 中的 h 函数：在选项对象中设置
h函数，使用 Vue 渲染函数完全自定义渲染逻辑。适合需要完全控制渲染的场景。通过 template 插槽：使用
option-default插槽来自定义选项内容。插槽接收{ option }作为作用域参数。适合简单的样式定制或内容调整。
Q: 选项数据很多时如何优化性能？
A: 建议使用以下方式优化：
- 使用
filterable和remote实现远程搜索，减少一次性加载的数据量 - 使用虚拟滚动（如果 Element Plus 版本支持）
- 对选项数据进行分页加载
最佳实践
- 使用
v-model进行双向绑定：这是 Vue 3 推荐的方式，代码更简洁 - 统一值类型：建议在同一个组件中，所有选项的
value使用相同的类型（都是字符串或都是数字） - 合理使用多选模式：根据业务需求选择单选或多选模式，多选模式下确保绑定值是数组
- 性能优化：如果选项列表很大，考虑使用远程搜索或虚拟滚动来优化性能
- 用户体验：对于选项较多的场景，建议启用
filterable搜索功能，提升用户体验