## Tree 樹形控件 文件夾、組織架構、生物分類、國家地區等等，世間萬物的大多數結構都是樹形結構。 使用樹控件可以完整展現其中的層級關系，并具有展開收起選擇等交互功能。  ### 代碼示例 基礎用法 ```html <cvu-tree :data="treeData" show-checkbox></cvu-tree> ``` 自定義節點標題鍵 >[info] 設置`title-key`屬性為樹結構數據中標題名稱的鍵名 ```html <cvu-tree :data="treeData" title-key="title"></cvu-tree> ``` 按鈕控制折疊/展開 >[info] 點擊按鈕調用組件方法`onExpand()` ```html <cvu-tree ref="cvuTree" :data="treeData"></cvu-tree> ``` ```javascript ... this.$refs.cvuTree.onExpand() ... ``` 右鍵菜單 >[info] 樹結構數據某節點設置`contextmenu`屬性為`true` ```html <cvu-tree ref="cvuTree" :data="treeData" show-checkbox> <template slot="contextMenu"> <DropdownItem>編輯</DropdownItem> <DropdownItem style="color: #ed4014">刪除</DropdownItem> </template> </cvu-tree> ``` 異步加載子節點 ```html <template> <cvu-tree :data="data3" :load-data="loadData" show-checkbox></cvu-tree> </template> <script> export default { data () { return { data3: [ { title: 'parent', loading: false, children: [] } ] } }, methods: { loadData (item, callback) { setTimeout(() => { const data = [ { title: 'children', loading: false, children: [] }, { title: 'children', loading: false, children: [] } ]; callback(data); }, 1000); } } } </script> ``` 自定義節點內容 ```html <template> <cvu-tree :data="data5" :render="renderContent" class="demo-tree-render"></cvu-tree> </template> <script> export default { data() { return { data5: [ { title: 'parent 1', expand: true, render: (h, { root, node, data }) => { return h('span', { style: { display: 'inline-block', width: '100%' } }, [ h('span', [ h('Icon', { props: { type: 'ios-folder-outline' }, style: { marginRight: '8px' } }), h('span', data.title) ]), h('span', { style: { display: 'inline-block', float: 'right', marginRight: '32px' } }, [ h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-add', type: 'primary' }), style: { width: '64px' }, on: { // eslint-disable-next-line brace-style click: () => { this.append(data) } } }) ]) ]); }, children: [ { title: 'child 1-1', expand: true, children: [ { title: 'leaf 1-1-1', expand: true }, { title: 'leaf 1-1-2', expand: true } ] }, { title: 'child 1-2', expand: true, children: [ { title: 'leaf 1-2-1', expand: true }, { title: 'leaf 1-2-1', expand: true } ] } ] } ], buttonProps: { type: 'default', size: 'small', } } }, methods: { renderContent(h, { root, node, data }) { return h('span', { style: { display: 'inline-block', width: '100%' } }, [ h('span', [ h('Icon', { props: { type: 'ios-paper-outline' }, style: { marginRight: '8px' } }), h('span', data.title) ]), h('span', { style: { display: 'inline-block', float: 'right', marginRight: '32px' } }, [ h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-add' }), style: { marginRight: '8px' }, on: { // eslint-disable-next-line brace-style click: () => { this.append(data) } } }), h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-remove' }), on: { // eslint-disable-next-line brace-style click: () => { this.remove(root, node, data) } } }) ]) ]); }, append(data) { const children = data.children || []; children.push({ title: 'appended node', expand: true }); this.$set(data, 'children', children); }, remove(root, node, data) { const parentKey = root.find(el => el === node).parent; const parent = root.find(el => el.nodeKey === parentKey).node; const index = parent.children.indexOf(data); parent.children.splice(index, 1); } } } </script> <style> .demo-tree-render .ivu-tree-title { width: 100%; } </style> ``` ## API ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | data | 可嵌套的節點屬性的數組，生成 tree 的數據 | Array | \[\] | | multiple | 是否支持多選 | Boolean | false | | show-checkbox | 是否顯示多選框 | Boolean | false | | empty-text | 沒有數據時的提示 | String | 暫無數據 | | load-data | 異步加載數據的方法，見示例 | Function | \- | | render | 自定義渲染內容，見示例 | Function | \- | | children-key | 定義子節點鍵 | String | children | | check-strictly | 在顯示復選框的情況下，是否嚴格的遵循父子不互相關聯的做法 | Boolean | false | | check-directly | 開啟后，在 show-checkbox 模式下，select 的交互也將轉為 check | Boolean | false | | select-node | 開啟后，點擊節點將使用單選效果 | Boolean | true | | expand-node | 開啟后，點擊節點將使用展開/收起子節點效果，該選項優先于 select-node | Boolean | false | | title-key| 定義標題名稱鍵 | String | 'title'| | parent-icon | 父節點圖標(iview Icon組件type屬性值) | String | ios-folder-open | | children-icon | 子節點圖標(iview Icon組件type屬性值) | String | md-list-box | ### events | 事件名 | 說明 | 返回值 | | --- | --- | --- | | on-select-change | 點擊樹節點時觸發 | 當前已選中的節點數組、當前項 | | on-check-change | 點擊復選框時觸發 | 當前已勾選節點的數組、當前項 | | on-toggle-expand | 展開和收起子列表時觸發 | 當前節點的數據 | | on-contextmenu | 當前節點點擊右鍵時觸發 | data, event, position | ### slot | 名稱 | 說明 | | --- | --- | | contextMenu | 右鍵菜單，詳見示例 | ### methods | 方法名 | 說明 | 參數 | | --- | --- | --- | | getCheckedNodes | 獲取被勾選的節點 | 無 | | getSelectedNodes | 獲取被選中的節點 | 無 | | getCheckedAndIndeterminateNodes | 獲取選中及半選節點 | 無 | | onExpand | 折疊/展開 | 無 | ### children | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | title | 標題 | String | Element String | \- | | expand | 是否展開直子節點 | Boolean | false | | disabled | 禁掉響應 | Boolean | false | | disableCheckbox | 禁掉 checkbox | Boolean | false | | selected | 是否選中子節點 | Boolean | false | | checked | 是否勾選(如果勾選，子節點也會全部勾選) | Boolean | false | | children | 子節點屬性數組 | Array | \- | | render | 自定義當前節點渲染內容，見示例 | Function | \- | | contextmenu | 是否支持右鍵菜單 | Boolean | false |