1.npm install 下载依赖项 2.npm install vue-tree-jf --save 下载vue-tree-jf组件
import vueTree from 'vue-tree-jf' Vue.use(vueTree); ..... <vue-tree :treeData='datas' ref='vtree' @clickNode ='clickNode' ></vue-tree> | 参数 | 类型 | 默认值 | 描述 |
| treeData | Array | 数据源，包含'id','text','icon','children'属性。 示例：[ {text:'xiaoming', id:'1', icon:'folder', children:[ {text:'1-1', id:'1-1', icon:'folder', children:[ {text:'1-1-1', id:'1-1-1', icon:'file', },{text:'1-1-2', id:'1-1-2', icon:'file' }] },{ text:'1-2', id:'1-2', icon:'folder', }] } ] | |
| checkBox | Boolean | false | 是否显示checkbox |
| transitionTime | Number | 200 | 折叠动画时间，单位ms |
| expand | Boolean | true | 初始化时折节点展开状态 |
| 参数名称 | 类型 | 默认值 | 描述 |
| text | String | 节点名称 | |
| id | String | 节点id | |
| icon | String | 节点图标 | |
| children | Array | 节点的子节点 |
| 方法名称 | 参数 | 返回值 | 描述 |
| getSelectedNode | - | 返回选中的tree节点 | |
| getCheckedNodes | - | 返回多选的tree节点 | 在多选属性checkbox为true时有效。 |
| getRoot | - | 获取树根节点。 | |
| findNode | nodeId | 节点id | 获根据id获取选中节点数据。 |
| setSelectedNode | node,ifClick | node:节点数据，包含id字段即可。 ifClick：是否触发点击事件 | 设置树节点选中。 |
| getParentNode | node | node：节点对象（包含id属性即可） | 获取父节点数据。 |
| getParentNodesArr | node | node：节点对象（包含id属性即可） | 获取所有祖先节点数据数组。 |
| 事件名称 | 参数 | 参数说明 | 描述 |
| clickNode | node | 当前点击节点的数据 | 节点点击时触发 |
<template><div class="hello"> <vue-tree :treeData='datas' ref='vtree' @clickNode='clickNode' :checkBox='checkbox'></vue-tree> <button @click='findSelected'>getNode</button></div> </template> <script> import Vue from 'vue' import vueTree from 'vue-tree-jf' Vue.use(vueTree); export default { name: 'HelloWorld', methods:{ findSelected(){ console.log('you clicked' + JSON.stringify(this.$refs.vtree.getSelectedNode())); if(this.checkbox){ console.log('you choosed ' + JSON.stringify(this.$refs.vtree.getCheckedNodes())) } }, clickNode(target){ console.log('you clicked '+ target.id) } }, data () { return { msg: 'Welcome to Your vtree App', checkbox:true, datas:[ {text:'xiaoming', id:'1', icon:'folder', children:[ {text:'1-1', id:'1-1', icon:'folder', children:[ {text:'1-1-1', id:'1-1-1', icon:'file', },{text:'1-1-2', id:'1-1-2', icon:'file' }] },{ text:'1-2', id:'1-2', icon:'file', }] }, {text:'hua', id:'2', icon:'folder', children:[{ text:'2-2', id:'2-2', icon:'file', }] }, {text:'hua', id:'3', icon:'folder', children:[{ text:'3-3', id:'3-3', icon:'file', }] } ] } }, } </script> <style scoped> .hello{ float:left; width:400px; border:1px solid black; } </style>