用vue实现动态组织结构图

vue-tree-chart
首页：https://github.com/tower1229/Vue-Tree-Chart

安装
npm i vue-tree-chart --save

使用

<TreeChart :json="treeData" />

import TreeChart from "vue-tree-chart";

export default {
    components: {
        TreeChart
    },
    data() {
        return {
            treeData: {
                ...
            }
        }
    }

属性
json
组件数据，支持字段：

• name[String] 节点名称
• image_url[String] 节点图片
• children[Array] 节点后代
• mate[Object] 节点配偶

示例：

{
        name: "root",
        image_url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2630827124,3247653916&fm=26&gp=0.jpg",
        children: [
          {
            name: "children1",
            image_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1613235989,912197966&fm=26&gp=0.jpg",
          },
          {
            name: "children2",
            image_url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=353363612,2684432714&fm=26&gp=0.jpg",
            mate: {
              name: "mate",
              image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1438056379,2761486367&fm=26&gp=0.jpg",
            },
            children: [
              {
                name: "grandchild",
                image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1438056379,2761486367&fm=26&gp=0.jpg",
              },
              {
                name: "grandchild2",
                image_url: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2617837085,2502578524&fm=26&gp=0.jpg",
              },
              {
                name: "grandchild3",
                image_url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1032627925,3655457209&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            name: "children3",
            image_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3232601148,1094191157&fm=26&gp=0.jpg",
          },
        ],
      },

事件
click-node
点击节点触发，接收当前节点数据为参数

文章参考于http://www.guanggoo.com/t/35329