最近公司设计要求根据目录结构，横向展示。所以做了一个横向的思维导图，横向的树结构，横向的组织架构图，可以自定义节点颜色，样式，还可以导出为图片

话不多说，直接上图片，这个就是一个小例子
子组件，直接上代码，子组件的线条颜色，可以自己设置变量从父组件传入，我这里没写。
isUnfold 表示是否有下级

<template>
  <div class="my-self-tree" ref="my-tree">
    <div class="info-card">
      <div class="card-item" v-for="(item, index) in data" :key="index">
        <div
          class="vertical-line"
          :style="computedHeight(item.height, data.length, index)"
          v-if="item.level !== 0"
        ></div>
        <div class="horizontal-line" v-if="item.level !== 0"></div>
        <div class="tree-node" :class="{'tree-node-1': item.level == 0&&item.isUnfold != 0}">
          <div
            class="tree-node-content"
            :class="[handlItem(item)]"
            @click="clickTreeNode(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div
          class="horizontal-line"
          v-if="item.childNode && item.childNode.length !== 0"
        ></div>
        <mytree
          @nodeClick="clickTreeNode"
          :data="item.childNode"
          v-if="item.childNode && item.childNode.length !== 0"
        ></mytree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mytree",
  props: {
    data: Array,
  },
  data() {
    return {};
  },
  methods: {
    computedHeight(pheight, length, index) {
      if (length == 1 || length == 0) {
        return {
          height: "0px",
          display: "none",
        };
      } else {
        let height = 0;
        let marginTop = 0;
        let marginB = 0;
        if (index == 0) {
          height = pheight / 2;
          marginTop = height;
          return {
            height: height + "px",
            "margin-top": marginTop + "px",
          };
        }
        if (index == length - 1) {
          height = pheight / 2;
          marginB = height;
          return {
            height: height + "px",
            "margin-bottom": marginB + "px",
          };
        } else {
          height = pheight;
          return {
            height: height + "px",
          };
        }
      }
    },
    clickTreeNode(item) {
      this.$emit("nodeClick", item);
    },
    handlItem(item) {
      if (item.level == 0) {
        return 'has-background'
      }else {
        if (item.isUnfold == 1) {//中间节点
          let flag = this.hasZeroCountNode(item.childNode);
          console.log(flag, 'flag')
          if (item.level == 1) {
            return flag ? 'font-color-black border-black' : 'font-color-green border-green';
          } else {
            return flag ? 'font-color-black' : 'font-color-green';
          }
        } else if (item.isUnfold == 0) {//最后一个节点
          if (item.level == 1) {
            return item.count == 0 ? 'font-color-red border-red' : 'font-color-green border-green'
          } else {
            return item.count == 0 ? 'font-color-red' : 'font-color-green'
          }
        }
      }
    },
    hasZeroCountNode(nodes) {
      //不含当前节点的count判断，判断所有子节点
      for (let node of nodes) {
        if (node.count === 0) {
          return true;
        }
        if (node.childNode && this.hasZeroCountNode(node.childNode)) {
          return true;
        }
      }
      return false;
      //含当前节点的count判断
      // if (node.count === 0) {
      //   return true; // 如果找到节点的count为0，立即返回true
      // }
      // if (node.childNode && node.childNode.length > 0) {
      //   // 如果节点有子节点，则递归检查子节点
      //   return node.childNode.some(child => this.hasZeroCountNode(child));
      // }
      // return false; // 如果节点和其子节点都不满足条件，返回false
    }
  },
  components: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
:root .my-self-tree {
  // height: 100%;
  // width: 100%;
  .vertical-line {
    position: relative;
    // display: inline-block;
    width: 0.5px;
    background: #009694;
    transform:scale(2, 1);
  }
  .card-item {
    margin:0;padding:0;
    display: flex;
    align-items: center;
    .horizontal-line {
      min-width: 30px !important;
      //   display: inline-block;
      height: 0.5px;
      background: #009694;
      transform:scale(1 , 2);
      position: relative;
    }
    .horizontal-line::before {
      content:'';
      position:absolute;
      height: 1px;
      width:2px;
      right:-1px;
      background: #009694;
    }
    .horizontal-line::after {
      content:'';
      position:absolute;
      height: 1px;
      width:2px;
      left:-1px;
      background: #009694;
    }
  }
  .tree-node {
    cursor: pointer;
    height: 30px;
    position: relative;
    &:nth-child(1)::after {
      display: none;
    }
    // &:nth-child(1)::before {
    //   position: absolute;
    //   content: "";
    //   width: 8px;
    //   display: inline-block;
    //   height: 8px;
    //   border-radius: 4px;
    //   top: 50%;
    //   right: -4px;
    //   transform: translateY(-50%);
    //   background: #009694;
    // }
    .tree-node-content {
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      width: auto;
      height: 100%;
      border: none;
      border-radius: 4px;
      color: #000;
      white-space: nowrap !important;
      padding: 0 10px;
    }
    .has-background {
      color: white;
      background: #009694;
    }
    .border-green {
      border: 1px solid #009694;
    }
    .border-black {
      border: 1px solid #000;
    }
    .border-red {
      border: 1px solid #FF6767;
    }
    .font-color-green {
      color: #009694;
    }
    .font-color-black {
      color: #000;
    }
    .font-color-red {
      color: #FF6767;
    }
  }
  .tree-node::after {
    position: absolute;
    content: "";
    width: 8px;
    display: inline-block;
    height: 8px;
    border-radius: 4px;
    top: 50%;
    left: -4px;
    transform: translateY(-50%);
    background: #009694;
  }
  .tree-node-1::before {
      position: absolute;
      content: "";
      width: 8px;
      display: inline-block;
      height: 8px;
      border-radius: 4px;
      top: 50%;
      right: -4px;
      transform: translateY(-50%);
      background: #009694;
    }
}
</style>

这里是父组件

<el-popconfirm
          placement="top-end"
          title="是否需要导出为图片？"
          @confirm="exportFn"
          >
          <el-button
            slot="reference"
            style="margin-left: 10px"
            type="primary"
            class="fliter-btn icons-btn"
            size="mini"
            ><i class="qhFileManage icon-daochu" style="font-size: 14px;"></i> 导出
          </el-button>
          </el-popconfirm>
<tree :data="dataInfo" @nodeClick="nodeClick" id="mytree" style="height: 100%;"></tree>

//处理数据
//temporaryData 为实际获取的数据 ，temporaryData1 是做例子写的数据
    handleData(temporaryData) {
      //自行调试测试数据，后面换成正式数据
      let temporaryData1 = [
        {
          id: 1,
          level: 0,
          name: "部门名称啊",
          childNode: [
            {
              id: 11,
              level: 1,
              name: "自己测试数据",
              isUnfold: 1,
              childNode: [
                {
                  id: 1111111,
                  level: 2,
                  name: "所有下级节点count>0",
                  isUnfold: 1,
                  childNode: [
                    {
                      id: 1111111,
                      level: 3,
                      name: "2ge",
                      count: 2,
                      isUnfold: 0,
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: 1,
                      isUnfold: 1,
                      childNode: [
                        {
                          id: 1111111,
                          level: 4,
                          name: "2",
                          isUnfold: 1,
                          childNode: [
                            {
                              id: 1111111,
                              level: 4,
                              name: "1ge",
                              count: 1,
                              isUnfold: 0,
                            },
                          ],
                        },
                      ],
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: "2ge",
                      count: 2,
                      isUnfold: 0,
                    },
                  ],
                },
                {
                  id: 1111111,
                  level: 2,
                  name: "所有下级节点count=0",
                  isUnfold: 1,
                  childNode: [
                    {
                      id: 1111111,
                      level: 3,
                      name: "0ge",
                      count: 0,
                      isUnfold: 0,
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: 1,
                      isUnfold: 1,
                      childNode: [
                        {
                          id: 1111111,
                          level: 4,
                          name: "0ge",
                          count: 0,
                          isUnfold: 0,
                        },
                      ],
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: "0ge",
                      count: 0,
                      isUnfold: 0,
                    },
                  ],
                },
                {
                  id: 1111111,
                  level: 2,
                  name: "所有下级节点存count=0,>0",
                  isUnfold: 1,
                  childNode: [
                    {
                      id: 1111111,
                      level: 3,
                      name: "0ge",
                      count: 0,
                      isUnfold: 0,
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: 1,
                      isUnfold: 1,
                      childNode: [
                        {
                          id: 1111111,
                          level: 4,
                          name: "1ge",
                          count: 1,
                          isUnfold: 0,
                        },
                      ],
                    },
                    {
                      id: 1111111,
                      level: 3,
                      name: "1ge",
                      count: 1,
                      isUnfold: 0,
                    },
                  ],
                },
              ],
            },
          ],
          isUnfold: 1,
        },
      ];
      let fixedData = temporaryData.map((item) => {
        return this.traveTree(item);
      });
      console.log(fixedData, "fixedData");
      this.dataInfo = fixedData;
    },
// traveTree这里是给每个节点设置高度，
    traveTree(nodeInfo) {
      let childrenInfo = nodeInfo.childNode;
      if (!childrenInfo || childrenInfo.length == 0) {
        nodeInfo.height = 40;
      } else {
        childrenInfo.map((item) => {
          this.traveTree(item);
        });

        nodeInfo.height = childrenInfo.reduce((preV, n) => {
          return preV + n.height;
        }, 0);
      }
      return nodeInfo;
    },