vue实现横向树

横向树的实现思路

横向树与纵向树的主要区别在于布局方式。横向树采用水平方向展开子节点，通常通过CSS的display: flex和transform属性实现。Vue中可以通过递归组件和动态样式实现横向树的渲染。

基础结构设计

创建树形组件HorizontalTree.vue，使用递归方式渲染子节点。核心数据结构示例：

data() {
  return {
    treeData: {
      label: 'Root',
      children: [
        { label: 'Child 1', children: [...] },
        { label: 'Child 2' }
      ]
    }
  }
}

关键CSS样式

.tree-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.node {
  display: flex;
  position: relative;
  padding: 10px;
}
.children {
  display: flex;
  position: relative;
}
.connector {
  position: absolute;
  height: 2px;
  background: #ccc;
  top: 50%;
  right: -15px;
  width: 15px;
}

递归组件实现

<template>
  <div class="tree-container">
    <div class="node">
      {{ node.label }}
      <div class="connector" v-if="hasChildren"></div>
    </div>
    <div class="children" v-if="hasChildren">
      <horizontal-tree 
        v-for="child in node.children" 
        :key="child.label" 
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'HorizontalTree',
  props: {
    node: Object
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length
    }
  }
}
</script>

交互优化方案

添加展开/折叠功能时，需在节点数据中添加状态字段：

data() {
  return {
    treeData: {
      label: 'Root',
      expanded: true,
      children: [...]
    }
  }
}

修改模板部分：

<div class="node" @click="toggleExpand">
  {{ node.label }}
  <span class="toggle-icon">{{ node.expanded ? '-' : '+' }}</span>
  <div class="connector" v-if="hasChildren && node.expanded"></div>
</div>
<div class="children" v-if="hasChildren && node.expanded">
  <!-- 子节点渲染 -->
</div>

动画效果增强

使用Vue的过渡组件实现平滑展开：

.children {
  transition: all 0.3s ease;
  overflow: hidden;
}

复杂场景处理

对于多层级横向树，可能需要调整连接线样式：

.connector::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -15px;
  height: 100%;
  width: 2px;
  background: #ccc;
}

通过组合这些技术要素，可以构建出功能完善的横向树组件。实际项目中可能需要根据具体需求调整间距、连线样式或交互细节。