Vue2-org-tree详解

最新推荐文章于 2025-10-23 02:27:39 发布

原创最新推荐文章于 2025-10-23 02:27:39 发布 · 4.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了Vue2-org-tree组件的使用方法，包括npm引入、配置数据、自定义节点和样式，以及如何处理节点点击和展开事件。作者分享了在项目中的应用实例，并邀请读者讨论和提出问题。

介绍：

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中引入我这里是因为所有节点都是要自定义返回所以没去按照那个步骤去下载样式，不知有没有必要下载那个样式文件。

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