组件

OneTree

节点行是 div[tabindex]，容器使用 role=tree，展开的子树使用 role=group；aria-expanded 与 aria-selected、aria-level、aria-posinset、aria-setsize 表达层级与状态。

设计
工程
- 前端

查看代码收起代码

import { OneTree, type OneTreeSelectEvent } from '@geektech/one';

const tree = new OneTree({
  defaultExpanded: ['engineering'],
  data: [
    {
      value: 'design',
      label: '设计',
      children: [
        { value: 'visual', label: '视觉' },
        { value: 'interaction', label: '交互' },
      ],
    },
    {
      value: 'engineering',
      label: '工程',
      children: [
        { value: 'frontend', label: '前端' },
        { value: 'quality', label: '质量' },
      ],
    },
  ],
});
tree.on('select', (payload) => {
  const event = payload as OneTreeSelectEvent;
  console.log(event.value);
});

勾选级联

checkable 开启复选框；cascade 默认开启，勾选父节点会同步所有后代，父节点随子节点状态呈现“勾选/半选/未选”。

键盘导航

方向键在可见节点间移动焦点，ArrowRight 展开或进入首个子节点，ArrowLeft 收起或回到父节点，Home/End 跳转首尾，Space/Enter 触发选中或勾选。

API

OneTree 属性与事件
名称	签名	说明
`data`	`data?: readonly OneTreeNode[]`	树节点：value、label、disabled 与可选 children。
`defaultExpanded`	`defaultExpanded?: readonly string[]`	非受控初始展开节点。
`expanded`	`expanded?: readonly string[]`	受控展开节点。
`defaultSelected`	`defaultSelected?: string \| null`	非受控初始选中节点。
`selected`	`selected?: string \| null`	受控选中节点。
`selectable`	`selectable?: boolean`	是否允许选中，默认 true。
`defaultChecked`	`defaultChecked?: readonly string[]`	非受控初始勾选节点。
`checked`	`checked?: readonly string[]`	受控勾选节点。
`checkable`	`checkable?: boolean`	显示复选框，默认 false。
`cascade`	`cascade?: boolean`	勾选级联到后代与祖先，默认 true。
`ariaLabel`	`ariaLabel?: string`	树容器的可访问名称。
`expand`	`(event: OneTreeExpandEvent) => void`	展开状态变化时发出 value: string[] 与 originalEvent。
`select`	`(event: OneTreeSelectEvent) => void`	选中变化时发出 value: string \| null 与 originalEvent。
`check`	`(event: OneTreeCheckEvent) => void`	勾选变化时发出完全勾选的 value: string[] 与 originalEvent。