vue 实现文档树结构

实现文档树结构的基本思路

在Vue中实现文档树结构通常需要结合递归组件和树形数据。树形数据通常是一个嵌套的对象或数组，每个节点包含子节点信息。递归组件能够根据数据层级自动渲染嵌套结构。

数据结构的定义

树形数据通常采用以下结构，每个节点包含id、label和children属性。children是一个数组，存储子节点数据。

const treeData = [
  {
    id: 1,
    label: 'Node 1',
    children: [
      {
        id: 2,
        label: 'Node 1.1',
        children: []
      },
      {
        id: 3,
        label: 'Node 1.2',
        children: [
          {
            id: 4,
            label: 'Node 1.2.1',
            children: []
          }
        ]
      }
    ]
  }
]

递归组件的实现

创建一个递归组件TreeNode，用于渲染树形结构。组件通过props接收当前节点数据，并在模板中递归调用自身渲染子节点。

<template>
  <div class="tree-node">
    <div @click="toggle">
      {{ node.label }}
    </div>
    <div v-if="isOpen && node.children && node.children.length">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.tree-node {
  margin-left: 20px;
  cursor: pointer;
}
</style>

主组件调用递归组件

在主组件中引入TreeNode并传入树形数据。

<template>
  <div class="tree-container">
    <TreeNode
      v-for="node in treeData"
      :key="node.id"
      :node="node"
    />
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          children: [
            {
              id: 2,
              label: 'Node 1.1',
              children: []
            }
          ]
        }
      ]
    }
  }
}
</script>

动态加载子节点

对于大型树结构，可以采用动态加载子节点的方式优化性能。通过监听节点展开事件，异步加载子节点数据。

<script>
export default {
  methods: {
    async toggle() {
      if (!this.node.children && !this.isOpen) {
        const children = await fetchChildren(this.node.id)
        this.$set(this.node, 'children', children)
      }
      this.isOpen = !this.isOpen
    }
  }
}
</script>

添加交互功能

为树节点添加选中状态、拖拽排序等功能，提升用户体验。通过v-model或自定义事件实现节点选中逻辑。

<template>
  <div
    class="tree-node"
    :class="{ 'is-selected': isSelected }"
    @click="selectNode"
  >
    {{ node.label }}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: null
    }
  },
  computed: {
    isSelected() {
      return this.value && this.value.id === this.node.id
    }
  },
  methods: {
    selectNode() {
      this.$emit('input', this.node)
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以考虑使用第三方Vue树形组件库，如vue-tree-halower、element-ui的Tree组件等。这些库提供了丰富的功能和配置选项。

import { Tree } from 'element-ui'

export default {
  components: {
    Tree
  },
  data() {
    return {
      treeData: [],
      props: {
        label: 'name',
        children: 'zones'
      }
    }
  }
}

样式优化

通过CSS调整树形结构的缩进、图标和动画效果，使界面更加美观。使用transition添加展开/折叠动画。

.tree-node {
  transition: all 0.3s ease;
}

.tree-node:hover {
  background-color: #f5f5f5;
}