前端：vue实现树状结构图

使用vue-org-tree实现此种效果

实现步骤：

1.

npm install vue-tree-color——安装vue-tree-color，注意不是vue-org-tree

2.

npm install --save-dev less less-loader

3.

增加配置：

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

4：

代码实现：

	<div style="font-size:12px;margin-top:30px;">
			<vue2-org-tree
				collapsable
				:data="data"
				@on-expand="onExpand"
				:horizontal="true"
				:label-class-name="labelClassName"
				:renderContent="renderContent"
			/>
		</div>

js代码实现

  data() {
    return {
       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: "销售一部"
              },
              {
                id: 8,
                label: "销售二部"
              }
            ]
          },
          {
            id: 4,
            label: "财务部"
          },
          {
            id: 9,
            label: "HR人事"
          }
        ]
      }
    }
  },

插入methods:

	//渲染节点
	renderContent(h, data) {
						return (
							<table>
 								 <tr>
   									 <td><div ><img style = " width: 40px; height: 40px;" src="https://pcm.trplus.com.tw/1200x1200/sys-master/productImages/h45/h3e/8811488346142/000000000016053593-gallery-01.jpg" /></div>
  							     </td>
 								  	 <td>          
 									  		<div>
       								     <span>网络类型</span>
         								   <span>设备类型</span>
        							     <span>设备名称</span>
        		    				   <span>{data.label}</span>
       					  		  </div>
         						    <div style="font-size:12px;line-height:20px; "><span>设备ID</span><span>设备IP</span></div></td>
  							</tr>
							</table>
      );
    },

展开方法：

  //展开
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },

    collapse(list) {
      list.forEach(child => {
        if (child.expand) {
          child.expand = false;
        }
        child.children && this.collapse(child.children);
      });
    },

 getList() {
      // 后台回去的数据 赋值给data即可
    },

样式：

<style>
	.org-tree-node-label-inner {
  color: #000000;
  background-color: #BBBBBB;
}

</style>