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

佚名 7年前 (2019-04-18) 随笔 1534人围观抢沙发百度已收录

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

生成树形图的组件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>

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。