VbenTree 用法說明

VbenTree 是 Vben5 中基于 radix-vue 實現的樹形組件，支持單選、多選、展開/折疊、權限控制等功能。以下是其核心用法說明：

1. 基礎引入

import { VbenTree } from '@vben-core/shadcn-ui';

2. 核心屬性（Props）

屬性名	類型	說明	默認值
treeData	Recordable<any>[]	樹形結構數據	-（必填）
valueField	string	節點值字段名（用于標識節點唯一性）	'value'
labelField	string	節點顯示文本字段名	'label'
childrenField	string	子節點字段名	'children'
multiple	boolean	是否支持多選	false
checkStrictly	boolean	是否取消父子節點關聯（獨立選擇）	false
autoCheckParent	boolean	非嚴格模式下，是否自動選中父節點	true
defaultExpandedKeys	Array<number/string>	默認展開的節點 key 數組	[]
defaultExpandedLevel	number	默認展開的層級（優先級高于 defaultExpandedKeys）	0
disabled	boolean	是否禁用整個樹	false
disabledField	string	節點禁用狀態的字段名	'disabled'
bordered	boolean	是否顯示邊框	false
showIcon	boolean	是否顯示節點圖標（通過 iconField 指定字段）	true
iconField	string	節點圖標字段名	'icon'

3. 事件（Events）

事件名	回調參數	說明
select	(item: FlattenedItem) => void	節點選中狀態變化時觸發
expand	(item: FlattenedItem) => void	節點展開/折疊狀態變化時觸發

4. 插槽（Slots）

插槽名	說明	參數
node	自定義節點內容	{ value: 節點數據, level: 層級 }
header	樹頂部的自定義內容	-

5. 示例代碼

<template><VbenTreev-model="selectedKeys":tree-data="treeData":multiple="true":check-strictly="false"label-field="name"value-field="id"children-field="children"@select="handleSelect"><template #node="{ value }"><span>{{ value.name }}</span><span v-if="value.size" class="ml-2 text-gray-500">({{ value.size }})</span></template></VbenTree>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { VbenTree } from '@core/ui-kit/shadcn-ui/src/ui/tree';// 示例數據
const treeData = ref([{id: 1,name: '文件夾1',children: [{ id: 11, name: '文件1-1', size: '10KB' },{ id: 12, name: '文件1-2', size: '20KB' },],},{id: 2,name: '文件夾2',children: [{ id: 21, name: '文件2-1', size: '15KB' }],},
]);// 選中的節點值
const selectedKeys = ref<number[]>([11]);// 選中事件處理
const handleSelect = (item) => {console.log('選中節點:', item.value);
};
</script>

6. 方法（通過 ref 調用）

方法名	說明	參數
expandAll	展開所有節點	-
collapseAll	折疊所有節點	-
expandNodes	展開指定節點	keys: Arrayable<number/string>
collapseNodes	折疊指定節點	keys: Arrayable<number/string>
getItemByValue	根據值獲取節點數據	value: number/string

示例：

<template><VbenTree ref="treeRef" :tree-data="treeData" /><button @click="handleExpandAll">展開全部</button>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { VbenTree } from '@core/ui-kit/shadcn-ui/src/ui/tree';const treeRef = ref();
const handleExpandAll = () => {treeRef.value?.expandAll();
};
</script>

注意事項

• 數據格式：treeData 需為數組，每個節點的子節點通過 childrenField 指定的字段（默認 children）嵌套。
• 選中值綁定：通過 v-model 綁定選中的節點值（單選為單個值，多選為數組）。
• 禁用節點：可通過節點數據中的 disabledField 字段（默認 disabled）單獨禁用某個節點。