vue-tree 组织架构图/树形图自动生成(含添加、删除、修改)

向右看齐 2022-01-07 13:19 1197阅读 0赞

项目中用代码生成组织架构图  有新增,编辑,删除的功能

![1349812-20190418195053818-1721831256.png][]     ![1349812-20190418195129798-798526649.png][]

生成树形图的组件git-hub地址:  https://github.com/tower1229/Vue-Tree-Chart

建议把整个安装包下载下来,写成组件使用.这样方便定制自己的业务需求

初始代码:

<template>
        <table v-if="treeData.name">
          <tr>
            <td :colspan="treeData.children ? treeData.children.length * 2 : 1" :class="{parentLevel: treeData.children, extend: treeData.children && treeData.extend}">
              <div :class="{node: true, hasMate: treeData.mate}">
                <div class="person" @click="$emit('click-node', treeData)">
                  <div class="avat">
                    <img :src="treeData.image_url" />
                  </div>
                  <div class="name">{
           {treeData.name}}</div>
                </div>
                <div class="person" v-if="treeData.mate" @click="$emit('click-node', treeData.mate)">
                  <div class="avat">
                    <img :src="treeData.mate.image_url" />
                  </div>
                  <div class="name">{
           {treeData.mate.name}}</div>
                </div>
              </div>
              <div class="extend_handle" v-if="treeData.children" @click="toggleExtend(treeData)"></div>
            </td>
          </tr>
          <tr v-if="treeData.children && 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>

增加编辑功能,可以与element-ui的el-popover弹出框组件一起使用

<el-popover
      placement="top"
      width="180"
      trigger="hover">
      <div style="margin: 0">
        <el-button size="mini" type="primary" @click="addStock(0)" >新增</el-button>
        <el-button type="primary" size="mini" @click="addStock(1)">编辑</el-button>
        <el-button type="primary" size="mini" @click="dialogVisible2 = true" >删除</el-button>
      </div>
      <div class="avat" slot="reference">
        {
             {treeData.name}}
      </div>
    </el-popover>

在网上找了好几个插件,感觉这个还是比较好用的

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/10731862.html

[1349812-20190418195053818-1721831256.png]: https://img2018.cnblogs.com/blog/1349812/201904/1349812-20190418195053818-1721831256.png
[1349812-20190418195129798-798526649.png]: /images/20211220/154fa818844044fba5986f9642b6c3eb.png