详解树状结构图 vue-org-tree

前言

最近公司项目（Vue + Element ）需求有用到 tree ，所以呢我去网上找了很多插件，都不是很符合我的要求。最后在GitHub上面找到了一款插件是 iview 的组织结构树  vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。

安装

NPM

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

安装 loader

温馨提示：不安装less-loader基本上都会报错

npm install --save-dev less less-loader

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

CDN

# css
<link href="https://unpkg.com/vue2-org-tree@1.1.0/dist/style.css">

# js
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree@1.1.0/dist/index.js"></script>

简单起步

严老湿这边呢，就直接使用Vue-cli起步了，vue-org-tree 安装成功之后，我们就直接使用了，在Vue页面或者组件中使用vue2-org-tree 标签，动态绑定data

基本创建

<vue2-org-tree :data="data"/>

data数据放入页面中

id 每个元素不同的ID ，label为name， children为自己的子集数据

data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端"
              },
              {
                id: 6,
                label: "研发-后端"
              },
              {
                id: 9,
                label: "UI设计"
              },
              {
                id: 10,
                label: "产品经理"
              }
            ]
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部"
              },