Tree 树形控件

树形结构的数据展示，支持展开/折叠、选中、多选复选框，以及连线/无连线两种样式。

基础用法

−根节点 1

−子节点 1-1

叶子节点 1-1-1

叶子节点 1-1-2

子节点 1-2

+根节点 2

树形展示，支持展开/折叠和节点选中

vue

<script setup lang="ts">
import { ATree } from '@lite-code/aui-vue'

const treeData = [
  {
    key: '1',
    label: '根节点 1',
    children: [
      { key: '1-1', label: '子节点 1-1', children: [
        { key: '1-1-1', label: '叶子节点 1-1-1' },
        { key: '1-1-2', label: '叶子节点 1-1-2' },
      ]},
      { key: '1-2', label: '子节点 1-2' },
    ],
  },
  {
    key: '2',
    label: '根节点 2',
    children: [
      { key: '2-1', label: '子节点 2-1' },
      { key: '2-2', label: '子节点 2-2', disabled: true },
    ],
  },
]
</script>

<template>
  <ATree :data="treeData" :default-expanded-keys="['1', '1-1']" />
</template>

复选框模式

−根节点 1

−子节点 1-1

叶子 1-1-1

叶子 1-1-2

子节点 1-2

−根节点 2

子节点 2-1

子节点 2-2

设置 checkable 后显示复选框，父节点支持半选状态

vue

<script setup lang="ts">
import { ATree } from '@lite-code/aui-vue'

const treeData = [
  {
    key: '1',
    label: '根节点 1',
    children: [
      { key: '1-1', label: '子节点 1-1', children: [
        { key: '1-1-1', label: '叶子 1-1-1' },
        { key: '1-1-2', label: '叶子 1-1-2' },
      ]},
      { key: '1-2', label: '子节点 1-2' },
    ],
  },
  {
    key: '2',
    label: '根节点 2',
    children: [
      { key: '2-1', label: '子节点 2-1' },
      { key: '2-2', label: '子节点 2-2' },
    ],
  },
]
</script>

<template>
  <ATree :data="treeData" checkable default-expand-all />
</template>

无连线模式

根节点 1

子节点 1-1

叶子 1-1-1

叶子 1-1-2

子节点 1-2

根节点 2

子节点 2-1

设置 :line='false' 使用箭头图标，隐藏连接线

vue

<script setup lang="ts">
import { ATree } from '@lite-code/aui-vue'

const treeData = [
  {
    key: '1',
    label: '根节点 1',
    children: [
      { key: '1-1', label: '子节点 1-1', children: [
        { key: '1-1-1', label: '叶子 1-1-1' },
        { key: '1-1-2', label: '叶子 1-1-2' },
      ]},
      { key: '1-2', label: '子节点 1-2' },
    ],
  },
  {
    key: '2',
    label: '根节点 2',
    children: [
      { key: '2-1', label: '子节点 2-1' },
    ],
  },
]
</script>

<template>
  <ATree :data="treeData" :line="false" default-expand-all />
</template>

API

Props

属性	类型	默认值	说明
data	TreeNodeData[]	—	树形数据（必填）
defaultExpandAll	boolean	false	默认展开所有节点
expandedKeys	(string | number)[]	—	展开的节点 key（受控）
defaultExpandedKeys	(string | number)[]	—	默认展开的节点 key（非受控）
onExpand	(keys) => void	—	展开状态变化回调
selectable	boolean	true	是否可选中节点
selectedKeys	(string | number)[]	—	选中的节点 key（受控）
defaultSelectedKeys	(string | number)[]	—	默认选中的节点 key（非受控）
onSelect	(keys) => void	—	选中状态变化回调
checkable	boolean	false	是否显示复选框
checkedKeys	(string | number)[]	—	选中的复选框 key（受控）
defaultCheckedKeys	(string | number)[]	—	默认选中的复选框 key（非受控）
onCheck	(keys) => void	—	复选框状态变化回调
line	boolean	true	是否显示连接线（false 使用箭头）
className	string	—	自定义 class
style	object	—	自定义样式

TreeNodeData

字段	类型	说明
key	string | number	节点唯一标识（必填）
label	string	节点显示文字（必填）
children	TreeNodeData[]	子节点列表
disabled	boolean	禁用节点（不可点击）
disableCheckbox	boolean	禁用复选框（节点本身可选）