ExUI

Appearance

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>

默认展开所有 ​

默认展开所有节点。

展开文件夹游戏目录
展开文件夹角色
展开文件夹装备
展开文件夹配置文件
vue
<template>
  <ExTree
    :data="treeData"
    default-expand-all
  />
</template>

显示连接线 ​

显示节点之间的连接线。

展开文件夹游戏目录
展开文件夹角色
vue
<template>
  <ExTree
    :data="treeData"
    :default-expanded-keys="['1', '1-1']"
    show-line
  />
</template>

禁用节点 ​

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

展开文件夹可用节点
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: 'https://api.iconify.design/ri/gamepad-line.svg',
        children: [
          {
            key: '1-1',
            label: '图片',
            icon: 'https://api.iconify.design/ri/image-line.svg',
          },
        ],
      },
    ]"
  />
</template>

赛博朋克主题示例 ​

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

游戏技能树

展开图标战士技能
展开文件夹攻击系
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—

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

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 属性
  • 完整的键盘导航支持
  • 支持屏幕阅读器
  • 支持减少动画偏好设置

主题定制 ​

可以通过 CSS 变量自定义树形控件样式：

css
:root {
  --ex-tree-node-bg: var(--ex-color-bg-secondary);
  --ex-tree-node-hover-bg: var(--ex-color-bg-hover);
  --ex-tree-node-selected-bg: rgba(41, 171, 226, 0.1);
  --ex-tree-node-color: var(--ex-color-text-primary);
}