vue树形结构图

1、下载插件：cnpm i vue2-org-tree

 

2、下载less-loader不然报错（this.getOptions is not a function）：npm install less-loader@4.1.0 --save

 

3、main.js引用：

import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

 

4、引入：

# 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>

 

5、页面引入css样式不然没样式就一坨：import 'vue2-org-tree/dist/style.css'

 

6、页面应用：<vue2-org-tree :data="data"/>

 

7、假数据：

 datas: {

          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: "销售一部"

                },

                {

                  id: 8,

                  label: "销售二部"

                }

              ]

            },

            {

              id: 4,

              label: "财务部"

            },

            {

              id: 9,

              label: "HR人事"

            }

          ]

        }

      }

 

8、点击事件：@on-node-click="NodeClick"     可接收两个值（e,val）

 

9、改变颜色：

（1）:label-class-name="labelClassName"

（2）return{   labelClassName: "bg-color"  }

  (3) style样式修改，去掉scoped不然不生效

 

10、纵享丝滑~~  采于https://zhuanlan.zhihu.com/p/117300250