## 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 |