基于Vue实现动态组织结构图

最近一个项目里有个前端绘制家谱图的需求，大概是下面这个样子：

组件源码如下

<template>
    <table v-if="treeData.name">
        <tr>
            <td :colspan="Array.isArray(treeData.children) ? treeData.children.length * 2 : 1"
                :class="{parentLevel: Array.isArray(treeData.children) && treeData.children.length, extend: Array.isArray(treeData.children) && treeData.children.length && treeData.extend}">
                <div :class="{node: true, hasMate: treeData.mate}">
                    <div class="person" :class="Array.isArray(treeData.class) ? treeData.class : []"
                        @click="$emit('click-node', treeData)">
                        <div class="avat">
                            <img v-if="treeData.image_url" :src="treeData.image_url" />
                            <img v-else src="/static/user_default.png" />
                        </div>
                        <div class="name">{{ treeData.name }}</div>
                        <div class="sub_name" v-if="treeData.subName">{{ treeData.subName }}</div>
                    </div>
                    <template v-if="Array.isArray(treeData.mate) && treeData.mate.length">
                        <div class="person" v-for="(mate, mateIndex) in treeData.mate" :key="treeData.name+mateIndex"
                            :class="Array.isArray(mate.class) ? mate.class : []" @click="$emit('click-node', mate)">
                            <div class="avat">
                                <img :src="mate.image_url" />
                            </div>
                            <div class="name">{{mate.name}}</div>
                        </div>
                    </template>
                </div>
                <div class="extend_handle" v-if="Array.isArray(treeData.children) && treeData.children.length"
                    @click="toggleExtend(treeData)"></div>
            </td>
        </tr>
        <tr v-if="Array.isArray(treeData.children) && treeData.children.length && treeData.extend">
            <td v-for="(children, index) in treeData.children" :key="index" colspan="2" class="childLevel">
                <TreeChart :json="children" @click-node="$emit('click-node', $event)" />
            </td>
        </tr>
    </table>
</template>

<script>
    export default {
        name: "TreeChart",
        props: ["json"],
        data() {
            return {
                treeData: {}
            }
        },
        watch: {
            json: {
                handler: function(Props) {
                    let extendKey = function(jsonData) {
                        jsonData.extend = (jsonData.extend === void 0 ? true : !!jsonData.extend);
                        if (Array.isArray(jsonData.children)) {
                            jsonData.children.forEach(c => {
                                extendKey(c)
                            })
                        }
                        return jsonData;
                    }
                    if (Props) {
                        this.treeData = extendKey(Props);
                    }
                },
                immediate: true
            }
        },
        methods: {
            toggleExtend: function(treeData) {
                treeData.extend = !treeData.extend;
                this.$forceUpdate();
            }
        }
    }
</script>

<style scoped>
    table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        width: 100%
    }

    td {
        position: relative;
        vertical-align: top;
        padding: 0 0 50px 0;
        text-align: center;
    }

    .extend_handle {
        position: absolute;
        left: 50%;
        bottom: 30px;
        width: 10px;
        height: 10px;
        padding: 10px;
        transform: translate3d(-15px, 0, 0);
        cursor: pointer;
    }

    .extend_handle:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 2px solid;
        border-color: #ccc #ccc transparent transparent;
        transform: rotateZ(135deg);
        transform-origin: 50% 50% 0;
        transition: transform ease 300ms;
    }

    .extend_handle:hover:before {
        border-color: #333 #333 transparent transparent;
    }

    .extend .extend_handle:before {
        transform: rotateZ(-45deg);
    }

    .extend::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 15px;
        height: 15px;
        border-left: 2px solid #ccc;
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 100%;
        height: 15px;
        border-left: 2px solid #ccc;
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -15px;
        border-top: 2px solid #ccc;
    }

    .childLevel:first-child:before,
    .childLevel:last-child:before {
        display: none;
    }

    .childLevel:first-child:after {
        left: 50%;
        height: 15px;
        border: 2px solid;
        border-color: #ccc transparent transparent #ccc;
        border-radius: 6px 0 0 0;
        transform: translate3d(1px, 0, 0)
    }

    .childLevel:last-child:after {
        right: 50%;
        height: 15px;
        border: 2px solid;
        border-color: #ccc #ccc transparent transparent;
        border-radius: 0 6px 0 0;
        transform: translate3d(-1px, 0, 0)
    }

    .childLevel:first-child.childLevel:last-child::after {
        left: auto;
        border-radius: 0;
        border-color: transparent #ccc transparent transparent;
        transform: translate3d(1px, 0, 0)
    }

    .node {
        position: relative;
        display: inline-block;
        margin: 0 1em;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
    }

    .node .person {
        position: relative;
        display: inline-block;
        z-index: 2;
        width: 6em;
        overflow: hidden;
    }

    .node .person .avat {
        display: block;
        width: 4em;
        height: 4em;
        margin: auto;
        overflow: hidden;
        background: #fff;
/*        border: 1px solid #ccc;*/
        border-radius: 50%;
        box-sizing: border-box;
    }

    .node .person .avat img {
        width: 100%;
        height: 100%;
    }

    .node .person .name {
        height: 2em;
        line-height: 2em;
        overflow: hidden;
        width: 100%;
    }
    .sub_name{

    }

    .node.hasMate::after {
        content: "";
        position: absolute;
        left: 2em;
        right: 2em;
        top: 2em;
        border-top: 2px solid #ccc;
        z-index: 1;
    }

    /* 横板 */
    .landscape {
        transform: translate(-100%, 0) rotate(-90deg);
        transform-origin: 100% 0;
    }

    .landscape .node {
        text-align: left;
        height: 8em;
        width: 8em;
    }

    .landscape .person {
        position: relative;
        transform: rotate(90deg);
        padding-left: 4.5em;
        height: 4em;
        top: 4em;
        left: -1em;
    }

    .landscape .person .avat {
        position: absolute;
        left: 0;
    }

    .landscape .person .name {
        height: 4em;
        line-height: 4em;
    }

    .landscape .hasMate {
        position: relative;
    }

    .landscape .hasMate .person {
        position: absolute;
    }

    .landscape .hasMate .person:first-child {
        left: auto;
        right: -4em;
    }

    .landscape .hasMate .person:last-child {
        left: -4em;
        margin-left: 0;
    }
</style>

使用

<TreeChart :json="treeData" @click-node="clickNode" />

数据如下

treeData:  {
                    name: '保密中心',
                    subName: '张三',
                    image_url: "",
                    class: ["rootNode"],
                    children: [
                          {
                            name: '综合科室',
                            subName: '张三',
                            image_url: ""
                          },
                          {
                            name: '保密科室',
                            subName: '王五',
                            image_url: "",
                            // mate: [{
                            //       name: 'mate',
                            //       image_url: "https://static.refined-x.com/avat3.jpg"
                            // }],
                            children: [
                                  {
                                    name: '保密局一',
                                    subName: '张三',
                                    image_url: ""
                                  },
                                  {
                                    name: '保密局二',
                                    subName: '张三',
                                    image_url: ""
                                  },
                                  {
                                    name: '保密局三',
                                    subName: '李四',
                                    image_url: ""
                                  }
                            ]
                          },
                          {
                            name: '销毁科室',
                            subName: '王麻子',
                            image_url: "",
                          }
                    ]
                }