项目中用代码生成组织架构图 有新增,编辑,删除的功能
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>
在网上找了好几个插件,感觉这个还是比较好用的