Vue使用树状结构图v-org-tree

简单介绍

v-org-tree是一个基于Vue封装的组织结构树组件，支持自定义节点和收缩按钮，高自由度定制，有水平和垂直两种方向

使用步骤

1. Install v-org-tree (安装)

npm install v-org-tree

2. 组件内使用代码

<template>
	<OrgTree :data="data"
             collapsable
             :node-render="nodeRender"
             :expand-all="expandAll"
             :horizontal="horizontal"
             :props="props"
             @on-expand="onExpand"
             @on-node-click="onNodeClick"/>
</template>

<script>
import OrgTree from 'v-org-tree'
import 'v-org-tree/dist/v-org-tree.css'
import { data } from './tree-data'
export default {
  name: 'OrgView',
  data () {
    return {
      data,
      expandAll: true,
      horizontal: false,
      props: {
        id: 'id',
        label: 'label',
        expand: 'expand',
        children: 'children'
      }
    }
  },
  components: { OrgTree },
  methods: {
    nodeRender (h, data) {
      return data.label
    },
    onExpand (val, status) {
      console.log(val, status)
    },
    onNodeClick (e, data) {
      console.log(data)
    }
  }
}
</script>

3. data数据结构（注意：配置的 props 的属性值应与 data中的字段对应）

export const data = {
  id: 0,
  label: 'XXX科技有限公司',
  children: [
    {
      id: 2,
      label: '产品研发部',
      children: [
        {
          id: 5,
          label: '产品经理'
        }, {
          id: 6,
          label: 'UI设计'
        }, {
          id: 9,
          label: '研发-前端'
        }, {
          id: 10,
          label: '研发-后端'
        }, {
          id: 12,
          label: '测试'
        }
      ]
    },
    {
      id: 3,
      label: '销售部',
      children: [
        {
          id: 7,
          label: '销售一部',
          children: [
            {
              id: 14,
              label: '售前'
            }, {
              id: 15,
              label: '售后'
            }, {
              id: 16,
              label: '客服'
            }
          ]
        }, {
          id: 8,
          label: '销售二部'
        }, {
          id: 13,
          label: '销售三部'
        }
      ]
    },
    {
      id: 4,
      label: '财务部'
    }, {
      id: 11,
      label: 'HR人事'
    }
  ]
}

4. 效果如下

• 垂直排列

• 水平排列

````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

参考资料：树状结构图v-org-tree的GitHub地址