# 組件名`cap4-tree` ---- ### 引入 ```js import Cap4Tree from 'cap4-pc-ui/lib/cap4-tree'; import 'cap4-pc-ui/lib/cap4-tree/css/cap4-tree.css'; ``` ### 基礎用法 <template> <div class="demo-block" > <cap4-tree :treeData="treeData" :activeItem="activeItem" @childClick="childClick" @childDbClick="childDbClick" ></cap4-tree> </div> </template> <script> export default { data() { return { // 注意root虛擬節點不顯示 treeData: { name: 'root', id: 'root', level: 0, type: 'ul', show: true, branch: true, showChildren: true, children: [{ id: '0', name: '城市', parentId: 'root', type: 'ul', level: 1, show: true, branch: true, showChildren: true, children: [{ id: '1', level: 2, name: '北京', parentId: '0', show: true, branch: false }, { id: '2', level: 2, name: '上海', parentId: '0', show: true, branch: false }, { id: '3', level: 2, name: '廣州', parentId: '0', show: true, branch: false }] }] }, activeItem: [] }; }, methods: { childClick(item) { this.activeItem = [item]; console.log(item); }, childDbClick(item) { this.activeItem = [item]; console.log(item); }, listChoose(id, items) { console.log(id, items); } } }; </script> ::: demo ```html <template> <div class="demo-block" > <cap4-tree :treeData="treeData" :activeItem="activeItem" @childClick="childClick" @childDbClick="childDbClick" ></cap4-tree> </div> </template> <script> export default { data() { return { // 注意root虛擬節點不顯示 treeData: { name: 'root', id: 'root', level: 0, type: 'ul', show: true, branch: true, showChildren: true, children: [{ id: '0', name: '城市', parentId: 'root', type: 'ul', level: 1, show: true, branch: true, showChildren: true, children: [{ id: '1', level: 2, name: '北京', parentId: '0', show: true, branch: false }, { id: '2', level: 2, name: '上海', parentId: '0', show: true, branch: false }, { id: '3', level: 2, name: '廣州', parentId: '0', show: true, branch: false }] }] }, activeItem: [] }; }, methods: { childClick(item) { this.activeItem = [item]; console.log(item); }, childDbClick(item) { this.activeItem = [item]; console.log(item); }, listChoose(id, items) { console.log(id, items); } } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |treeData | 數據 (必填)) | Object | — | '' | |activeItem | 選中項 (選填)) | Array | — | | |showFull | 全稱 (選填)) | Boolean | — | | |showFolderIcon | 顯示文件夾圖標 (選填)) | Boolean | — | | ### Event | 事件名稱 | 說明 | 回調參數 | |------------- |----------- |--------- | |childClick |單擊| item | |childDbClick |雙擊| item | |listChoose |多選| id, items |