# Tree 對 `antv` 的 tree 組件進行封裝 ## Usage ```vue <template> <BasicTree :treeData="treeData" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicTree } from '/@/components/Tree/index'; import { treeData } from './data'; import { CollapseContainer } from '/@/components/Container/index'; import { TreeItem } from '/@/components/Tree/index'; export const treeData: TreeItem[] = [ { title: 'parent 1', key: '0-0', icon: 'home|svg', children: [ { title: 'leaf', key: '0-0-0' }, { title: 'leaf', key: '0-0-1', children: [ { title: 'leaf', key: '0-0-0-0' }, { title: 'leaf', key: '0-0-0-1' }, ], }, ], }, { title: 'parent 2', key: '1-1', icon: 'home|svg', children: [ { title: 'leaf', key: '1-1-0' }, { title: 'leaf', key: '1-1-1' }, ], }, { title: 'parent 3', key: '2-2', icon: 'home|svg', children: [ { title: 'leaf', key: '2-2-0' }, { title: 'leaf', key: '2-2-1' }, ], }, ]; export default defineComponent({ components: { BasicTree, CollapseContainer }, setup() { return { treeData }; }, }); </script> ``` ## Props ::: tip 溫馨提醒 除以下參數外，官方文檔內的 props 也都支持，具體可以參考 [antv tree](https://2x.antdv.com/components/tree-cn/#Tree-props) ::: | 屬性 | 類型 | 默認值 | 可選值 | 說明 | 版本 | | ---------------- | ------------------------- | ------ | ------ | ---------------------------- | - | | treeData | `TreeItem[]` | - | - | 樹組件數據 | | | rightMenuList | `ContextMenuItem[]` | - | - | 右鍵菜單列表 | | | checkedKeys | `string[]` | - | - | 勾選的節點 | | | selectedKeys | `string[]` | - | - | 選中的節點 | | | expandedKeys | `string[]` | - | - | 展開的節點 | | | actionList | `ActionItem[]` | - | - | 鼠標移動上去右邊操作按鈕列表 | | | title | `string` | - | - | 定制標題字符串 | | | toolbar | `boolean` | - | - | 是否顯示工具欄 | | | search | `boolean` | - | - | 顯示搜索框 | | | clickRowToExpand | `boolean` | - | - | 是否在點擊行時自動展開 | | | beforeRightClick | `(node, event)=>ContextMenuItem[]` | - | - | 右鍵點擊回調，可返回右鍵菜單列表數據來生成右鍵菜單 | | | rightMenuList | `ContextMenuItem[]` | - | - | 右鍵菜單列表數據 | | | defaultExpandLevel | `string ｜ number` | - | - | 初次渲染后默認展開的層級 | 2.4.1 | | defaultExpandAll | `boolean` | `false` | `true/false` | 初次渲染后默認全部 | 2.4.1 | | searchValue(v-model) | `string` | - | - | 當前搜索詞 | 2.7.1 | ::: tip 注意 `defaultExpandLevel`、`defaultExpandAll` 僅在**初次渲染**時生效。如果`basicTree`是在創建完畢之后才設置的`treeData`(如異步數據)，需要在更新后自己調用`basicTree`提供的`expandAll`、`filterByLevel`來執行展開 ::: **ActionItem** ```ts { // 渲染的圖標 render: (record: any) => any; // 是否顯示 show?: boolean | ((record: Recordable) => boolean); } ``` **ContextMenuItem** ```ts { // 文本 label: string; // 圖標 icon?: string; // 是否禁用 disabled?: boolean; // 事件 handler?: (...arg) => any; // 是否顯示分隔線 divider?: boolean; // 子級菜單數據 children?: ContextMenuItem[]; } ``` ## Slots ::: tip 溫馨提醒 官方文檔內的 slot 都支持，具體可以參考 [antv tree](https://2x.antdv.com/components/tree-cn/#Tree-props) ::: ## Methods | 名稱 | 回調參數 | 說明 | | --------------- | ---------------------------------------------------- | ---------------------- | | checkAll | `(checkAll: boolean) => void` | 選擇所有 | | expandAll | `(expandAll: boolean) => void` | 展開所有 | | setExpandedKeys | `(keys: Keys) => void` | 設置展開節點 | | getExpandedKeys | `() => Keys` | 獲取展開節點 | | setSelectedKeys | `(keys: Keys) => void` | 設置選中節點 | | getSelectedKeys | `() => Keys` | 獲取選中節點 | | setCheckedKeys | `(keys: CheckKeys) => void` | 設置勾選節點 | | getCheckedKeys | `() => CheckKeys` | 獲取勾選節點 | | filterByLevel | `(level: number) => void` | 顯示指定等級 | | insertNodeByKey | `(opt: InsertNodeParams) => void` | 插入子節點到指定節點內 | | deleteNodeByKey | `(key: string) => void` | 根據 key 刪除節點 | | updateNodeByKey | `(key: string, node: Omit<TreeItem, 'key'>) => void` | 根據 key 更新節點 | | setSearchValue | `(value: string) => void` | 設置當前搜索詞（v2.7.1） | | getSearchValue | `() => string` | 獲取當前搜索詞(v2.7.1) |