# 组件名`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 |