介绍:

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

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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐