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

最新推荐文章于 2025-04-03 15:21:59 发布

tino.tang

最新推荐文章于 2025-04-03 15:21:59 发布

阅读量6k

点赞数 4

分类专栏：前端 vue 实用资源

本文链接：https://blog.youkuaiyun.com/qq_36289377/article/details/108825049

版权

本文介绍了如何在Vue中创建一个横向展示的树级组件，类似于流程图。关键依赖是LeaderLine插件，通过npm安装并引用。提供了官方文档链接以及名为RightTree.vue的源码示例，供开发者参考和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

唯一依赖

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')"
            >

最低0.47元/天解锁文章