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', }] } ]
示例:[ {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>