vue 实现树状

Vue 实现树状结构的方法

递归组件实现树状结构

递归组件是 Vue 中实现树状结构的常见方法。通过组件自身调用自身，可以轻松构建多层级树状结构。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      {{ item.name }}
      <tree-node v-if="item.children" :treeData="item.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方库

对于更复杂的树状结构需求，可以使用现成的 Vue 树组件库，如 vue-tree-list 或 element-ui 的树组件。

npm install vue-tree-list

<template>
  <vue-tree-list
    :model="treeData"
    @click="onClick"
  ></vue-tree-list>
</template>

<script>
import { VueTreeList } from 'vue-tree-list'

export default {
  components: {
    VueTreeList
  },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: []
          }
        ]
      }
    }
  }
}
</script>

动态加载树节点

对于大数据量的树状结构，可以实现动态加载子节点以提高性能。

<template>
  <ul>
    <li v-for="node in nodes" :key="node.id">
      <span @click="loadChildren(node)">{{ node.name }}</span>
      <tree-node 
        v-if="node.children && node.children.length"
        :nodes="node.children"
      ></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['nodes'],
  methods: {
    loadChildren(node) {
      if (!node.children) {
        // API call to load children
        node.children = [...]
      }
    }
  }
}
</script>

树状结构的数据格式

树状结构通常需要特定的数据格式，常见的有嵌套对象数组：

const treeData = [
  {
    id: 1,
    name: 'Parent',
    children: [
      {
        id: 2,
        name: 'Child 1',
        children: []
      }
    ]
  }
]

树状结构的样式控制

通过 CSS 可以控制树状结构的缩进和连接线：

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  margin: 5px 0;
}

li:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -15px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 15px;
  height: 15px;
}