Tree 树

使用场景#

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

示例#

基本示例#

Option 1

Option 2

动物园

阿里动物园

盒马

淘宝

天猫

其他小朋友

2号动物园

noInline

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

const bigTreeDataSource = [
  { key: '1', label: 'Option 1' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '4', label: '动物园' },
  {
    key: 'zoo',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝' },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子' },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        label: '小朋友',
        children: [
          { key: 'bar-4-小红红', label: '小红红' },
          { key: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { key: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function Basic() {
  return <StyledTree defaultExpandedKeys={['zoo']} dataSource={bigTreeDataSource} />;
}

render(<Basic />)

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

const bigTreeDataSource = [
  { key: '1', label: 'Option 1' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '4', label: '动物园' },
  {
    key: 'zoo',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝' },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子' },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        label: '小朋友',
        children: [
          { key: 'bar-4-小红红', label: '小红红' },
          { key: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { key: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function Basic() {
  return <StyledTree defaultExpandedKeys={['zoo']} dataSource={bigTreeDataSource} />;
}

render(<Basic />)

可勾选的树#

noInline

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

const bigTreeDataSource = [
  { key: '1', label: 'Option 1' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '4', label: '动物园' },
  {
    key: 'zoo',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝' },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子' },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        label: '小朋友',
        children: [
          { key: 'bar-4-小红红', label: '小红红' },
          { key: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { key: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function Checkable() {
  return <StyledTree checkable dataSource={bigTreeDataSource} onCheck={(...args) => console.log('onCheck', ...args)} />;
}

render(<Checkable />)

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

const bigTreeDataSource = [
  { key: '1', label: 'Option 1' },
  { key: '2', label: 'Option 2', disabled: true },
  { key: '4', label: '动物园' },
  {
    key: 'zoo',
    label: '阿里动物园',
    children: [
      { key: '盒马', label: '盒马' },
      { key: '淘宝', label: '淘宝' },
      { key: '天猫', label: '天猫' },
      {
        key: 'foo-4',
        label: '其他小朋友',
        children: [
          { key: '小红红', label: '小红红' },
          { key: '小蓝蓝', label: '小蓝蓝' },
          { key: '小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
  {
    key: '2号动物园',
    label: '2号动物园',
    children: [
      { key: '小脑虎', label: '小脑虎' },
      { key: '小狮子', label: '小狮子' },
      { key: '小企鹅', label: '小企鹅' },
      {
        key: 'bar-4',
        label: '小朋友',
        children: [
          { key: 'bar-4-小红红', label: '小红红' },
          { key: 'bar-4-小蓝蓝', label: '小蓝蓝' },
          { key: 'bar-4-小灰灰', label: '小灰灰' },
        ],
      },
    ],
  },
];

function Checkable() {
  return <StyledTree checkable dataSource={bigTreeDataSource} onCheck={(...args) => console.log('onCheck', ...args)} />;
}

render(<Checkable />)

虚拟滚动#

noInline

function makeBigTreeItems() {
  function makeNestedChildren(prefix, level, count) {
    const result = [];
    for (let i = 0; i < count; i++) {
      const key = `${prefix}-${i}`;
      result.push({
        key,
        label: (
          <span>
            第{level}层节点{' '}
            <span style={{ fontFamily: 'monospace' }}>
              ({prefix}-{i})
            </span>
          </span>
        ),
        children: count > 0 ? makeNestedChildren(key, level + 1, count - 6) : null,
      });
    }
    return result;
  }

  const big = [];
  for (let i = 0; i < 5; i++) {
    big.push({
      key: `key_${i}`,
      label: `顶层节点${i}`,
      children: makeNestedChildren(String(i), 1, 15),
    });
  }
  return big;
}

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

function Virtualization() {
  const bigDataSource = useMemo(makeBigTreeItems, []);

  const virtualListRef = useRef();

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(100 /* 默认为 VirtualListAlign.center */);
          }}
        >
          滚动到第100条数据（默认情况下为 0-2-6）
        </Button>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(0, VirtualListAlign.start);
          }}
        >
          滚动到第一条
        </Button>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(Infinity);
          }}
        >
          滚动到最后一条
        </Button>
      </div>
      <StyledTree
        style={{ width: 400, height: 400, overflow: 'auto', marginTop: 16 }}
        virtualListRef={virtualListRef}
        dataSource={bigDataSource}
        checkable
        defaultExpandAll
      />
    </div>
  );
}

render(<Virtualization />)

function makeBigTreeItems() {
  function makeNestedChildren(prefix, level, count) {
    const result = [];
    for (let i = 0; i < count; i++) {
      const key = `${prefix}-${i}`;
      result.push({
        key,
        label: (
          <span>
            第{level}层节点{' '}
            <span style={{ fontFamily: 'monospace' }}>
              ({prefix}-{i})
            </span>
          </span>
        ),
        children: count > 0 ? makeNestedChildren(key, level + 1, count - 6) : null,
      });
    }
    return result;
  }

  const big = [];
  for (let i = 0; i < 5; i++) {
    big.push({
      key: `key_${i}`,
      label: `顶层节点${i}`,
      children: makeNestedChildren(String(i), 1, 15),
    });
  }
  return big;
}

const StyledTree = styled(Tree)`
  width: 200px;
  border: 1px dashed var(--rex-colors-emphasis-40);
`;

function Virtualization() {
  const bigDataSource = useMemo(makeBigTreeItems, []);

  const virtualListRef = useRef();

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(100 /* 默认为 VirtualListAlign.center */);
          }}
        >
          滚动到第100条数据（默认情况下为 0-2-6）
        </Button>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(0, VirtualListAlign.start);
          }}
        >
          滚动到第一条
        </Button>
        <Button
          onClick={() => {
            virtualListRef.current.scrollToRow(Infinity);
          }}
        >
          滚动到最后一条
        </Button>
      </div>
      <StyledTree
        style={{ width: 400, height: 400, overflow: 'auto', marginTop: 16 }}
        virtualListRef={virtualListRef}
        dataSource={bigDataSource}
        checkable
        defaultExpandAll
      />
    </div>
  );
}

render(<Virtualization />)

API#

字段	描述
dataSource*	`TreeItem[]` 数据源，每个元素的结构为 { key, label, children }
defaultExpandAll	`boolean` 非受控用法，是否默认展开所有节点
defaultExpandedKeys	`string[]` 非受控用法，默认展开的节点的 key 数组
defaultSelectedKeys	`string[]` 非受控用法，默认选中的节点的 key 数组
checkable	`boolean` 是否开启复选
defaultCheckedKeys	`string[]` 非受控用法，默认选中的节点
checkStrictly	`boolean` 下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）
checkedStrategy	`TreeCheckedStrategy` 定义选中时回填的方式 - 'all'(返回所有选中的节点) - 'parent'(父子节点都选中时只返回父节点) - 'child'(父子节点都选中时只返回子节点)
checkedKeys	`string[]` 受控用法，当前选中的节点
onCheck	`(nextCheckedKeys: string[], detail: { item: TreeItem; action: "check" \| "uncheck"; event: ChangeEvent<HTMLElement>; }) => void` 节点勾选时的回调
style	`CSSProperties`
className	`string`
selectable	`boolean`
expandedKeys	`string[]` 受控用法，当前展开的节点的 key 数组
onExpand	`(nextExpandedKeys: string[], detail: { action: "expand" \| "collapse"; key: string; event: MouseEvent<HTMLElement, MouseEvent>; }) => void` 受控用法，节点展开时的回调
selectedKeys	`string[]`
onSelect	`(nextSelectedKeys: string[], detail: { item: TreeItem; action: "select" \| "unselect"; event: MouseEvent<HTMLElement, MouseEvent>; }) => void`
virtualListRef	`Ref<VirtualList<FlattenTreeItem>>`