vue 实现树状流程图的CUD（新增~修改~删除）

效果图

实现原理
1.放弃div的flex布局， 利用table可以更好地控制新增子节点的对齐，利用::before和::after实现虚线，不需要多余的div
2.使用组件递归，利用子传父$emit传值，v-on="$listeners"实现跨层级事件监听

父组件.vue

<template><div id="app"><TreeChart :model="tree" @on-add="add" @on-update="update" @on-remove="remove"/></div>
</template><script>
/*** 使用方式* <TreeChart :model="data" >* data 参数格式为树形结构* * {*  resName: "xxx",*  extend": true, 是否展开*  children: [{*    resName: "xxx",*    children: []*  }]* }
*/
import TreeChart from './components/TreeChart'
const dataTree= {"resId":"root","resName":"跟节点","extend": true,"children": [{"resId":"07fe2e8c976047e186bb6bcb8f4d6574","resName":"跟节点1","extend": true,"children": []}]
}
export default {data() {return {tree: dataTree}},components: {TreeChart},methods:{// 添加add: function(node){const newNode = {resName: '222',resId: new Date().getTime(),message: '',extend: true,children: []}node.children.push(newNode)},// 修改update: function(node){node.resName = new Date().getTime()},// 删除remove: function(node){if (node.resId == 'root'){alert('跟节点不能删除')return console.log('跟节点不能删除')}const deepSearch = (tree) => {for (let i = tree.length - 1; i >= 0; i--) {if (tree[i].resId == node.resId){console.log(tree[i])tree.splice(i, 1)} else if(tree[i].children){deepSearch(tree[i].children)}}}deepSearch(this.tree.children)}},
}
</script><style lang="scss">
*{padding: 0;margin: 0;#app{height: 100vh;width: 100vw;}
}
</style>

递归组件TreeChart.vue

<template><table><tr><td:colspan="hasChild ? model.children.length * 2 : 1":class="{ extend: hasChild && model.extend }"><div class="card"><div class="title">{{ model.resName }}</div><div class="body">{{ model.message }}</div><div class="footer"><div @click="$emit('on-add', model)">添加</div><div @click="$emit('on-update', model)">修改</div><div @click="$emit('on-remove', model)">删除</div></div></div><div class="extend_handle" v-if="hasChild" @click="toggleExtend()">{{ model.extend ? '展开' : '隐藏' }}</div></td></tr><tr v-if="hasChild && model.extend"><tdv-for="(item, index) in model.children":key="index"colspan="2"class="child"><!--跨层级监听事件 v-on="$listeners"（.native原生事件无效） --><TreeChart :model="item" v-on="$listeners"/></td></tr></table>
</template><script>
export default {name: 'TreeChart',props: ['model'],computed: {hasChild () {return this.model.children && this.model.children.length}},methods: {toggleExtend () {this.model.extend = !this.model.extend}}
}
</script><style lang="scss">
.card {background: rgb(227, 236, 247);border: 2px solid #ffffff;border-radius: 5px;margin: 0 auto;width: 200px;.title {padding: 10px 0;font-size: 12px;}.body {height: 100px;background: #ffffff;width: auto;margin: 0 15px;}.footer {display: flex;margin: 5px 15px;justify-content: space-between;div {font-size: 12px;color: rgb(20, 126, 192);cursor: pointer;}}
}
.extend_handle {cursor: pointer;
}
table {border-collapse: separate !important;border-spacing: 0 !important;td {position: relative;vertical-align: top;padding: 0 0 50px 0;text-align: center;&.extend {&::after {content: '';position: absolute;left: 50%;bottom: 18px;height: 30px;border-left: 2px dashed rgb(159, 186, 202);transform: translate3d(-1px, 0, 0);}}&.child {&::before {content: '';position: absolute;left: 50%;bottom: 100%;height: 15px;border-left: 2px dashed rgb(159, 186, 202);transform: translate3d(-1px, 0, 0);}// 横线&::after {content: '';position: absolute;left: 0;right: 0;top: -15px;border-top: 2px dashed rgb(159, 186, 202);}&:first-child:before,&:last-child:before {display: none;}&:first-child:after {left: 50%;height: 15px;border: 2px dashed;border-color: rgb(159, 186, 202) transparent transparentrgb(159, 186, 202);border-radius: 6px 0 0 0;transform: translate3d(1px, 0, 0);}&:last-child:after {right: 50%;height: 15px;border: 2px dashed;border-color: rgb(159, 186, 202) rgb(159, 186, 202) transparenttransparent;border-radius: 0 6px 0 0;transform: translate3d(-1px, 0, 0);}&:first-child.child:last-child::after {left: auto;border-radius: 0;border-color: transparent rgb(159, 186, 202) transparent transparent;transform: translate3d(1px, 0, 0);}}}
}
</style>