AtTreeFilter

夏源庆

最后更新于 2025-11-18 14:57:11

树形筛选器，让你的数据筛选像爬树一样轻松~

• 可严格选中（父子节点选中状态不再关联）
• 可异步加载（懒加载数据，性能更优）
• 支持自定义组件（想怎么玩就怎么玩）

代码演示

基础用法

异步加载数据

自定义组件

API

AtTreeFilter Props

名称	类型	默认值	说明	版本
value	array	[]	选中的值
model	any	{}	表单数据对象
options	array	必填项	树形数据
auto-expand-value	boolean	true	是否自动展开，开启会默认展开 value 的第一个节点
check-strictly	boolean	false	严格选中（父子节点选中状态不再关联）
remote	boolean	false	是否支持异步加载
label-field	string	'label'	label 字段名
value-field	string	'value'	value 字段名
children-field	string	'children'	children 字段名
on-load	function	undefined	异步加载数据（仅在 remote 为 true 时可用）

AtTreeFilter Expose

名称	类型	说明	版本
get-checked-nodes	(containsChildren?: boolean) => AtTreeNode[][]	获取选中的节点，返回二维数组，containsChildren 为 true 时包含子节点
format-targets	(targets?: any[]) => Promise<void>	格式化目标值，将目标值转换为组件内部使用的格式并自动展开

类型声明

显示类型声明

export interface AtTreeNodeBase {
  label?: string
  value?: any
  disabled?: boolean
  children?: AtTreeNodeBase[]
  expanded?: boolean
  path?: any[]
  [key: string]: any
}

export interface AtTreeNodeAsync extends AtTreeNodeBase {
  isLeaf?: boolean
  loading?: boolean
}

export type FieldType = 'input' | 'select' | 'datePicker' | 'custom'

export interface FieldPropMap {
  input: Omit<InputProps, UnNeedKey>
  select: Omit<SelectProps, UnNeedKey>
  datePicker: Omit<DatePickerProps, UnNeedKey>
  custom: unknown
}

export type AtTreeNode = AtTreeNodeBase & (
  | {
    type: FieldType
    props: FieldPropMap[FieldType]
  }
  | {
    type?: undefined
    props?: undefined
  }
)

changelog

558bb - feat(components): support formatTargets on 2024/12/25

7e2a3 - feat(components): support custom component on 2024/12/25

3e634 - fix(components): InjectionKey TreeFilterConfig to reactive on 2024/12/24

6ae04 - feat(components): support async loading on 2024/12/24

87283 - fix(components): replace flex-wrap with wrap on 2024/12/23

1c13b - feat(components): init AtTreeFilter on 2024/12/23

贡献者

夏

沈