vue树状结构图（组织架构）

1，安装插件

1，安装插件    
npm i vue2-org-tree --save-dev

2.安装 loader
npm install --save-dev less less-loader

3,安装完成在main.js 中引入
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

4，在页面直接使用组件

<vue2-org-tree :data="listData" :label-class-name="labelClassName" @on-node-click="treeClick" />

添加点击事件
@on-node-click 

treeClick(listData){
    console.log(listData)
}
绑定listData数据
  listData: {
        id: 0,
        label: "纪检监察",
        children: [

          {
            id: 1,
            label: "办公厅"
          },
          {
            id: 2,
            label: "组织部"
          },
          {
            id: 3,
            label: "宣传部"
          },
          {
            id: 4,
            label: "研究法规室"
          },
          ,
          {
            id: 5,
            label: "党风政风监督室"
          },
          {
            id: 6,
            label: "信访室"
          },
          {
            id: 7,
            label: "案件监督管理室"
          },
          {
            id: 8,
            label: "纪检监察室"
          },
          {
            id: 9,
            label: "案件审理室"
          },
          ,
          {
            id: 10,
            label: "纪检监察干部监督室"
          },
          {
            id: 11,
            label: "离退休干部室"
          },
          {
            id: 12,
            label: "机关党委办公室"
          }
        ]

      },

修改默认背景色
​ 使用 label-class-name动态绑定自定义class名
data() {
    return {
        labelClassName:"tree-color"
    }
 }
css：
.tree-color{
    color: #fff;
    background-color: orange;
}

 效果图：