横向结构的树组件（leader-line-vue）

近期做项目时需要做一个横向的树结构的图，如下所示：

 本图的实现采用了leader-line-vue组件，

具体实现如下：

先npm install leader-line-vue --save,安装依赖

然后，子组件RightTree的封装，代码如下：

<template>
  <div class="TreeRight" id="treeRight" v-if="showTree">
    <div class="childs">
      <div
        class="child"
        v-for="(item, index) in list"
        :key="item.id + '-child-' + index"
      >
        <div
          class="child-item"
          :style="{
            marginRight:
              item.children && item.children.length > 1 ? '20px' : '',
          }"
        >
          <div class="childname" :id="item">
            <div class="content-box" :ref="item.id" :id="item.id">
              {{ item.id }}
              <p
                v-for="(itemshow, index3) in showfields"
                :key="'itemshow' + index3"
              >
                {{ itemshow.name }}{{ item[itemshow.key] }}
              </p>
            </div>
            <div style=" 30px"></div>
            <div
              class="position-top"
              v-if="isFirst(item.id) && domready"
              :style="position_top(item.id, 'top')"
            ></div>
            <div
              class="position-top"
              v-if="isLast(item.id)"
              :style="position_top(item.id, 'bottom')"
            ></div>
          </div>
          <div style=" 160px"></div>
        </div>
        <!-- 递归组件展示子节点 -->
        <div
          class="child-children"
          v-if="item.children && item.children.length"
        >
          <RightTree :list="item.children" :showfields="showfields" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeaderLine from "leader-line-vue";
export default {
  name: "RightTree",
  components: {},
  data() {
    return {
      domready: false,
      lines: [],
    };
  },
  created() {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    showfields: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.domready = true;
      this.drawArrowLine();
    });
  },
  computed: {
    /**
     * 是否展示树计算属性
     */
    showTree() {
      return this.list && this.list.length;
    },
  },
  beforeDestroy() {
    /**
     * 离开页面时销毁所有line
     */
    if (this.lines && this.lines.length) {
      this.lines.forEach((line) => {
        line.remove();
      });
    }
  },
  methods: {
    /**
     * 递归绘制箭头
     */
    drawArrowLine() {
      this.drawLeaderLine(this.list);
      document.getElementById("treeRight").addEventListener("scroll", () => {
      if (this.lines && this.lines.length) {
        this.lines.forEach((line) => {
          line.position();
        });
      }
    });
    },
    /**
     * 根据上下级关系绘制线条
     */
    drawLeaderLine(list) {
      list.forEach((element) => {
        let start = document.getElementById(element.id);
        if (element.children && element.children.length) {
          element.children.forEach((child) => {
            let line = LeaderLine.setLine(
              start,
              document.getElementById(child.id)
            );
            line.color = "#7F7F7F";
            line.path = "fluid";
            line.size = 1;
            line.setOptions({
              solid: { animation: true },
            });
            this.lines.push(line);
          });
          this.drawLeaderLine(element.children);
        }
      });
    },
    position_top(id, position) {
      let dom = document.getElementById(id);
      let height;
      if (dom) {
        height = dom.clientHeight;
      }
      let rt;
      if (position === "top") {
        rt = {
          height: height / 2 - 2 + "px",
          top: 0,
        };
      }
      if (position === "bottom") {
        rt = {
          height: height / 2 + 1 + "px",
          bottom: 0,
        };
      }
      return rt;
    },
    isFirst(id) {
      return (
        this.list.length > 1 && this.list.map((x) => x.id).indexOf(id) === 0
      );
    },
    isLast(id) {
      return (
        this.list.length > 1 &&
        this.list.map((x) => x.id).indexOf(id) === this.list.length - 1
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.TreeRight {
   100%;
  height: 100%;
  overflow: auto;
  p {
    margin: 0;
    font-size: 13px;
  }
  display: flex;
  .father {
     70px;
    background-color: red;
    padding: 100px 10px;
  }
  .childs {
    .child {
      display: flex;
      background-color: #fff;
      .child-item {
        display: flex;
        align-items: center;
        margin: 10px 0;
        .childname {
          .content-box {
            text-align: left;
            border: 1px solid #e8e8e8;
            padding: 10px;
            height: 100px;
            border-radius: 2px;
             100%;
            box-shadow: 0 2px 4px 0 rgba(181, 181, 181, 0.7);
          }
          cursor: pointer;
          height: 100%;
          display: flex;
          align-items: center;
           220px;
          text-align: center;
          justify-content: center;
          position: relative;
          padding: 10px 0;
          .position-arrow {
            position: absolute;
            left: -22px;
          }
          .position-top {
            position: absolute;
             3px;
            background-color: #fff;
            left: -23px;
            height: 10px;
          }
        }
        .childarrow {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
    .child-children {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>

父亲组件引用方式如下：

<template>
  <div>
    <right-tree
      v-if="list && list.length"
      :list="list"
      :showfields="showFields"
    ></right-tree>
  </div>
</template>
<script>
import RightTree from '../components/RightTree'
export default {
    components:{
        RightTree,
    },
    data(){
        return{
            list: [//datasource
                {
                    id: '1',
                    name: 'span1',
                    serviceId: 'service1',
                    children: [
                        {
                            id: '1-1',
                            name: 'user',
                            serviceId: 'service-user',
                            children: [
                                {
                                    id: '1-1-1',
                                    name: 'shop',
                                    serviceId: '18',
                                    children: [
                                        {
                                            id: '1-1-1-1',
                                            name: 'common',
                                            serviceId: 'common-service',
                                        },
                                    ],
                                },
                                {
                                    id: '1-1-2',
                                    name: 'account1',
                                    serviceId: 'account-service',
                                },
                                {
                                    id: '1-1-3',
                                    name: 'account2',
                                    serviceId: 'account-service',

                                },
                                {
                                    id: '1-1-4',
                                    name: 'account3',
                                    serviceId: 'account-service',
                                },
                            ],
                        },
                        {
                            id: '1-2',
                            name: 'truck',
                            serviceId: 'truck-pay',
                            work: 'web',
                        },
                    ],
                },
            ],
            showFields: [
                {
                    name: '服务名称：',
                    key: 'name',
                },
                {
                    name: '服务编号：',
                    key: 'serviceId',
                },
            ],
        }
    },
    methods:{

    },
    
}
</script>

其实就是用leader-line-vue绘制了引导线，leader-line-vue的功能还是蛮强大的，想了解更深，可以参考官网：https://www.npmjs.com/package/leader-line-vue