QuickBoot

Appearance

c7-select 下拉选择器 ​

当选项过多时，使用下拉菜单展示并选择内容。基于 Element Plus 的 el-select 组件进行封装，提供了更强大的数据处理和交互功能。

v2.0 优化亮点：

  • ✅ 数据处理优化：提取工具函数，支持多种数据格式转换
  • ✅ 性能提升：使用计算属性缓存，避免重复计算
  • ✅ 代码简化：清理冗余代码，统一数据处理逻辑
  • ✅ 类型安全：完整的 TypeScript 类型定义支持
  • ✅ 工具集成：集成 c7-plus 数据格式化工具

基础用法 ​

适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值

默认值 ​

适用需要设置默认值，v-model 的值为当前被选中的 el-option 的 value 值

使用函数 ​

数据项可以调用函数获取

禁用选项 ​

禁用选项

指定标签和文本 ​

指定标签和文本

基础多选 ​

多选选择器使用 tag 组件来展示已选中的选项。

创建条目和搜索 ​

创建并选中未包含在初始选项中的条目。

自定义模板 ​

您可以自定义标签。

change事件回调 ​

监听事件

远程加载 ​

输入关键字以从远程服务器中查找数据。

分组展示 ​

你可以为选项进行分组来区分不同的选项

高级选择功能 ​

展示各种高级选择功能的使用：

复杂选择功能 ​

展示复杂选择功能的使用：

实际应用场景 ​

展示在实际应用中的使用场景：

Attributes ​

属性名说明类型可选值默认值
modelValue绑定值，支持 String/Number/ArrayString | Number | Array—''
fetchData异步获取数据的函数，统一用于初始化加载与远程搜索Function—null
dataFormatter数据格式化回调，接收原始 list，返回格式化后的 listFunction—null
labelKeyel-option 的 label 字段名String—'label'
valueKeyel-option 的 value 字段名String—'value'
resultKey异步结果中列表数据所在的路径String—'data'
dataList静态数据列表，当 fetchData 为 null 时使用Array—[]
fetchParams异步获取数据时的额外参数Object—{}
autoLoad是否在组件挂载后自动加载数据（仅在非远程模式）Booleantrue | falsetrue
separator多选模式下是否使用逗号分隔符来存储Booleantrue | falsetrue
multiple是否开启多选模式Booleantrue | falsefalse
tag是否开启 tag 模式（允许用户输入不存在的选项）Booleantrue | falsefalse
remote是否远程搜索模式Booleantrue | falsefalse
group是否开启分组Booleantrue | falsefalse