ExUI

Tree 树形控件 ​

用清晰的层级结构展示信息，可展开或折叠。

基础用法 ​

最基础的树形控件用法。

游戏目录
vue
<script setup>
import { ref } from 'vue';

const treeData = ref([
  {
    key: '1',
    label: '游戏目录',
    children: [
      {
        key: '1-1',
        label: '角色',
        children: [
          { key: '1-1-1', label: '战士.png' },
          { key: '1-1-2', label: '法师.png' },
        ],
      },
    ],
  },
]);
</script>

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

可勾选 ​

适用于需要选择层级时使用。

游戏目录
vue
<template>
  <ExTree :data="treeData" :default-expanded-keys="['1']" checkable @check="handleCheck" />
</template>

默认展开所有 ​

默认展开所有节点。

游戏目录
角色
战士.png
法师.png
刺客.png
装备
武器.json
防具.json
配置文件
config.json
settings.json
vue
<template>
  <ExTree :data="treeData" default-expand-all />
</template>

显示连接线 ​

显示节点之间的连接线。

游戏目录
角色
战士.png
法师.png
刺客.png
vue
<template>
  <ExTree :data="treeData" :default-expanded-keys="['1', '1-1']" show-line />
</template>

禁用节点 ​

通过设置节点的 disabled 属性可以禁用节点。

可用节点
子节点 1
禁用节点
vue
<template>
  <ExTree
    :data="[
      {
        key: '1',
        label: '可用节点',
        children: [
          { key: '1-1', label: '子节点 1' },
          { key: '1-2', label: '禁用节点', disabled: true },
        ],
      },
    ]"
    checkable
  />
</template>

自定义图标 ​

可以为节点设置自定义图标。

游戏资源
图片
音频
视频
vue
<template>
  <ExTree
    :data="[
      {
        key: '1',
        label: '游戏资源',
        icon: 'folder-open-line',
        children: [
          {
            key: '1-1',
            label: '图片',
            icon: 'image-line',
          },
        ],
      },
    ]"
  />
</template>

赛博朋克主题示例 ​

展示赛博朋克风格的树形控件应用场景。

游戏技能树

战士技能
攻击系
重击 Lv.5
旋风斩 Lv.3
破甲 Lv.1
vue
<template>
  <ExTree
    :data="skillTreeData"
    :default-expanded-keys="['warrior', 'warrior-attack']"
    checkable
    show-line
  />
</template>

API ​

Tree Props ​

属性说明类型默认值
data树节点数据TreeNode[][]
default-expanded-keys默认展开的节点 key 数组string[][]
expanded-keys / v-model:expanded-keys展开的节点 key 数组（受控）string[]—
default-selected-keys默认选中的节点 key 数组string[][]
selected-keys / v-model:selected-keys选中的节点 key 数组（受控）string[]—
default-checked-keys默认勾选的节点 key 数组string[][]
checked-keys / v-model:checked-keys勾选的节点 key 数组（受控）string[]—
selectable是否可选择booleantrue
multiple是否多选booleanfalse
checkable是否显示复选框booleanfalse
check-strictly勾选时是否级联booleanfalse
default-expand-all是否默认展开所有节点booleanfalse
show-line是否显示连接线booleanfalse
show-icon是否显示图标booleantrue
draggable是否可拖拽booleanfalse
disabled是否禁用booleanfalse
filter-node-method过滤函数(value: string, node: TreeNode) => boolean—
virtual是否启用虚拟滚动（大数据量，需固定 item-height + height）booleanfalse
item-height虚拟滚动节点行高（像素）number28
height虚拟滚动视口高度（像素或 CSS 值）number | string400
virtual-buffer虚拟滚动上下缓冲行数number6

TreeNode 数据结构 ​

属性说明类型必填
key节点唯一标识string是
label节点标题string是
children子节点TreeNode[]否
disabled是否禁用boolean否
selectable是否可选择boolean否
checkable是否可勾选boolean否
isLeaf是否为叶子节点boolean否
icon图标 URLstring否
data自定义数据any否

Tree Events ​

事件名说明类型
update:expanded-keys展开/收起节点时触发(keys: string[]) => void
update:selected-keys选中节点时触发(keys: string[]) => void
update:checked-keys勾选节点时触发(keys: string[]) => void
expand节点展开时触发(expandedKeys: string[], node: TreeNode, expanded: boolean) => void
select节点选中时触发(selectedKeys: string[], node: TreeNode, selected: boolean) => void
check节点勾选时触发(checkedKeys: string[], node: TreeNode, checked: boolean) => void
node-click节点点击时触发(node: TreeNode, event: MouseEvent) => void
node-contextmenu节点右键点击时触发(node: TreeNode, event: MouseEvent) => void
node-drag-start开始拖拽节点时触发（需 draggable）(node: TreeNode, event: DragEvent) => void
node-drag-enter拖拽进入节点时触发(node: TreeNode, event: DragEvent) => void
node-drag-leave拖拽离开节点时触发(node: TreeNode, event: DragEvent) => void
node-drag-end拖拽结束时触发(node: TreeNode, event: DragEvent) => void
node-drop放置节点时触发（dragNode 为完整节点，需自行更新 data 完成排序）(dragNode: TreeNode, dropNode: TreeNode, position: 'before' | 'after' | 'inner', event: DragEvent) => void

Tree Methods ​

方法名说明类型
getSelectedNodes获取当前选中的节点() => TreeNode[]
getCheckedNodes获取当前勾选的节点() => TreeNode[]
getHalfCheckedNodes获取半选中的节点() => TreeNode[]
setSelected设置某个节点的选中状态(key: string, selected: boolean) => void
setChecked设置某个节点的勾选状态(key: string, checked: boolean) => void
setExpanded设置某个节点的展开状态(key: string, expanded: boolean) => void
getNode获取节点(key: string) => TreeNode | null
expandAll展开所有节点() => void
collapseAll收起所有节点() => void
filter过滤节点(value: string) => void
getElement获取组件DOM元素() => HTMLDivElement | null

无障碍支持 ​

  • 使用语义化的 HTML 标签和 ARIA 属性
  • 完整的键盘导航支持
  • 支持屏幕阅读器
  • 支持减少动画偏好设置

主题定制 ​

树形控件跟随 ExUI 全局主题（ConfigProvider / 全局 --ex-color-* 变量）自动适配，无需单独配置。