vue2-org-tree助力前端开发，轻松构建组织结构图

2023-11-03 10:32:39

Vue2-Org-Tree：一款功能强大的组织结构图组件

简介

Vue2-Org-Tree 是一款专为 Vue.js 2 开发的组织结构图组件。它提供了简单易用、功能强大的方式来创建和展示组织结构，包括节点拖拽、节点展开/收缩、节点搜索等功能，满足你对组织结构图的所有需求。

安装

安装 Vue2-Org-Tree 非常简单。只需使用 npm 包管理器运行以下命令：

npm install vue2-org-tree --save

使用

要使用 Vue2-Org-Tree，请先在项目中导入它：

import VueOrgTree from 'vue2-org-tree'

然后，在你的组件中使用 VueOrgTree，并提供 data 属性来指定组织结构的数据：

<template>
  <VueOrgTree :data="data" />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: '1',
          name: 'CEO',
          children: [
            {
              id: '2',
              name: 'CTO',
              children: [
                {
                  id: '3',
                  name: '研发经理',
                  children: [
                    {
                      id: '4',
                      name: '前端工程师'
                    },
                    {
                      id: '5',
                      name: '后端工程师'
                    }
                  ]
                }
              ]
            },
            {
              id: '6',
              name: 'COO',
              children: [
                {
                  id: '7',
                  name: '销售总监',
                  children: [
                    {
                      id: '8',
                      name: '销售经理'
                    },
                    {
                      id: '9',
                      name: '销售人员'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>