vue 中实现结构图 vue-org-tree

xuedong1103

已于 2023-02-06 16:12:15 修改

阅读量499

点赞数 1

分类专栏： vue-org-tree 文章标签： vue.js 前端 javascript

于 2023-02-06 16:11:12 首次发布

本文链接：https://blog.csdn.net/weixin_46880303/article/details/128903023

版权

vue 实现组织结构图 (vue-org-tree)

摘要由CSDN通过智能技术生成

在这里插入图片描述

首先安装插件 vue-tree-color npm install vue-tree-color
安装 less和 less-loader(项目中已有则执行下一步)。npm install --save-dev less less-loader
在 main.js中引入

import Vue2OrgTree from 'vue-tree-color'
Vue.use(Vue2OrgTree)

使用插件

<vue2-org-tree
   :data="data"
   :horizontal="false"
   :label-class-name="labelClassName"
   collapsable
   @on-expand="onExpand"
   @on-node-click="NodeClick"
   @on-node-mouseover="onMouseover"
   @on-node-mouseout="onMouseout"
   :renderContent="renderContent"
 />
 // horizontal 为 true 为横向

data: {
   
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
   
            id: 2,
            label: "产品研发部",
            children: [
              {
   
                id: 5,
                label: "研发-前端",
                children: [
                  {
   
                    id: 55,
                    label: "前端1"
                  },
                  {
   
                    id: