Appearance
AtComplexSelector
夏源庆
最后更新于 2025-11-18 14:57:11
简单的复杂选择器
Warning
该组件使用了 useMessage , 请检查组件是否放在 n-message-provider 内部使用
代码演示
基础用法
限制最大数量
配置 maxLimit 限制最大选择数量, 结合 showCount 与 selectedCount 来控制显示当前选择数量与最大选择数量
可过滤的
通过配置 filterable 来开启过滤, 配合 filter 使用自定义过滤器
异步加载数据
通过配置 remote 来开启异步加载, 配合 on-load 回调来加载数据。
Tip
异步加载时，所有 isLeaf 为 false 并且 children 不为数组的节点会被视为需要加载的节点。
API
AtComplexSelector Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| value | array | undefined | 受控的选中值 | |
| options | array | [] | 原始树形数据 | |
| show-count | boolean | false | 是否显示已选数量 | |
| selected-count | number | undefined | 受控的已选择数量 | |
| max-limit | number | 0 | 限制最大可选数量 | |
| check-strictly | boolean | false | 严格选中（父子节点选中状态不再关联） | |
| group-avatar | string | undefined | 默认组头像 | |
| user-avatar | string | undefined | 默认用户头像 | |
| label-field | string | label | 替代 AtComplexSelectorOption 中的 label 字段名 | |
| value-field | string | value | 替代 AtComplexSelectorOption 中的 value 字段名 | |
| children-field | string | children | 替代 AtComplexSelectorOption 中的 children 字段名 | |
| filterable | boolean | false | 是否可过滤 | |
| selector-class | string | undefined | 左侧selector的类名 | |
| selector-style | object | undefined | 左侧selector的style | |
| filter | function | 一个简单的字符串搜索算法 | 过滤器函数 | |
| remote | boolean | false | 是否支持异步加载, 在异步的状况下你可能需要把它设为 true | |
| on-load | Promise | undefined | 异步加载数据 | |
| on-change | function | undefined | 改变回调 | |
| on-checked-all | function | undefined | 选择全部回调 |
AtComplexSelectorOption Properties
| 名称 | 类型 | 描述 | 版本 |
|---|---|---|---|
| label | string | label 标签，用于展示信息 | |
| value | string | number | 对应 label 的 value 值 | |
| disabled? | boolean | 该项是否禁用 | |
| avatar? | string | 指定头像图片链接 | |
| children? | AtComplexSelectorOption | 该项的子项数据, 详情查看类型声明 |
AtComplexSelectorAsyncOption Properties
| 名称 | 类型 | 描述 | 版本 |
|---|---|---|---|
| is-leaf? | boolean | 是否为叶子 |
AtComplexSelector Events
| 名称 | 参数 | 说明 | 版本 |
|---|---|---|---|
| change | (checked: boolean, option: AtComplexSelectorProps['options'][number]) | 选项选中状态改变时触发 | |
| checked-all | (checked: boolean, options: AtComplexSelectorProps['options']) | 全选/取消全选时触发 |
AtComplexSelector Expose
| 名称 | 类型 | 说明 | 版本 |
|---|---|---|---|
| get-selected-nodes | function | 获取选中的数据 | |
| manual-next | function | 手动下一页 |
类型声明
显示类型声明
Typescript
export interface AtComplexSelectorOption {
[key: string]: any
label: string
value: string | number
disabled?: boolean
avatar?: string
children?: AtComplexSelectorOption[]
}
/** 异步选项类型 */
export interface AtComplexSelectorAsyncOption extends AtComplexSelectorOption {
isLeaf?: boolean
}