vue横向树级组件（流程图、组件递归）

效果

唯一依赖

LeaderLine插件
npm安装方式：https://www.npmjs.com/package/leader-line-vue

官方文档
https://anseki.github.io/leader-line/

源码

RightTree.vue

<template>
  <div
    class="tree-right"
    v-if="showTree"
  >
    <div class="childs">
      <div
        class="child"
        v-for="(dataItem,index) in list"
        :key="dataItem.id +'-child-'+index"
      >
        <div
          class="child-item"
          :style="{
      marginRight: dataItem.children && dataItem.children.length > 1 ? '20px' :''}"
        >
          <div
            class="childname"
            :id="dataItem"
          >
            <div
              class="content-box"
              @click="traceDetail(dataItem)"
              :ref="dataItem.id"
              :id="dataItem.id"
            >
              <p
                v-for="(showItem,index3) in showfields"
                :key="'showItem'+index3"
              ><strong>{
  {showItem.name}}</strong><span :style="{
      'color':showItem.color}">{
  {dataItem[showItem.key]}}</span></p>
            </div>
            <div style="width:30px"></div>
            <div
              class="position-top"
              v-if="isFirst(dataItem.id) && domready"
              :style="position_top(dataItem.id,'top')"
            ></div>
            <div
              class="position-top"
              v-if="isLast(dataItem.id)"
              :style="position_top(dataItem.id,'bottom')"
            >