Vue编写的树形tree组件

近期在进行vue的学习，自研的vue项目需要一个tree组件。由于在学习阶段，不想‘拿来主义’，拿别人写好的组件使用，对于处于学习阶段的开发者来说不是一件好事，虽然拿别人开发好的东西过来用可以快速进行业务开发，但阻绝了学习者锻炼自身开发技能的机会。‘拿来主义’的学习方式，与其说是学习一门语言，不如说是学习一种成熟组件的使用方式。自己动手写一写还是非常有利于自身水平提升的。于是，开始动手自己写vue-tree组件。

代码：

效果图：

使用方式：

            安装：npm install vue-tree-jf --save

             引用：

import vueTree from 'vue-tree-jf'

Vue.use(vueTree);


.....

初始化参数

参数	类型	默认值	描述
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	Boolen	false	是否显示checkbox

 

treeData参数

参数名称	类型	默认值	描述
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	当前点击节点的数据	节点点击时触发

 

完整项目github：https://github.com/jianfeng418/vue-tree