Vue2-org-tree详解

介绍：

        vue2-org-tree是一个开源的树组件，主要可以用于组织树的开发，其中有自定义展开方式、自定义样式、自定义节点、自定义节点点击方式可以配合鼠标的原生时间实现自己想要的功能。

一、如何使用

        1. 引入vue2-org-tree  在控制台输入npm i vue2-org-tree -s 即可 在main.js中配置 

import Vue2OrgTree from 'vue2-org-tree'
Vue.use(Vue2OrgTree)

        2.在页面中引入组件并使用

HTML部分
<template>
    <div>
        <Vue2OrgTree 
            :data="要传的data类型为object object中children为数组"
            :horizontal="传true或false true代表树是横向，false是竖向"
            :collapsable="传true或false true为默认展开 false为默认收起"
            :renderContent="renderContent该属性为自定义节点，可在JS方法中返回自定义节点"
            @on-node-click ="onNodeClick 该方法为业务逻辑处理的地方"
            @on-expend="onExpend 该方法为业务逻辑处理的地方"
            
        />
    </div>
</template>

Js部分
<script>
import Vue2OrgTree from 'vue2-org-tree'


export default{
    components:{
        Vue2OrgTree 
    }，
    methods:{
       onNodeClick(e,data){
            点击节点后触发的业务逻辑
        },
       onExpend(){
             点击展开后触发的业务逻辑
        }，
       renderContent(h,data){
            data为传给树的数据 h为树的函数事件
            if(判断条件){
                 return(
                <div>这里写自定义节点的HTML,也可以为自定义的组件</div>
                    )    
                }
           
        }
    }
}
</script>

   样式部分网上大多都说是要下载一个less样式文件然后放入项目中在style中引入 我这里是因为所有节点都是要自定义返回所以没去按照那个步骤去下载样式，不知有没有必要下载那个样式文件。

大概就是这些，项目中用到记录一下，欢迎指出问题、互相讨论。