当前位置：首页 > VUE

vue实现列表树加载

2026-01-21 20:40:35VUE

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: Array
  }
}
</script>

使用时，将树形数据传递给组件：

<template>
  <tree-node :treeData="treeData"></tree-node>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          children: [
            { id: 2, name: '子节点1' },
            { id: 3, name: '子节点2' }
          ]
        }
      ]
    }
  }
}
</script>

动态加载子节点

对于大型树结构，可以使用动态加载方式，只在展开时加载子节点。

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <span @click="toggleChildren(item)">
        {{ item.name }}
        <span v-if="item.hasChildren && !item.children">[+]</span>
        <span v-if="item.hasChildren && item.children">[-]</span>
      </span>
      <tree-node 
        v-if="item.children" 
        :treeData="item.children"
        @load-children="loadChildren"
      ></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  },
  methods: {
    toggleChildren(item) {
      if (!item.children && item.hasChildren) {
        this.$emit('load-children', item)
      }
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以考虑使用专门处理树形结构的 Vue 组件库：

Vue-Tree-Chart: 提供可交互的树形图表
Vue-Js-Tree: 功能丰富的树形组件
Element UI Tree: 饿了么UI提供的树组件

安装 Element UI Tree 示例：

npm install element-ui

使用示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
    :load="loadNode"
    lazy
  ></el-tree>
</template>

<script>
import { Tree } from 'element-ui'

export default {
  components: {
    'el-tree': Tree
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        return resolve([{ name: '根节点', id: 1 }])
      }
      // 异步加载子节点
      setTimeout(() => {
        resolve([
          { name: '子节点1', id: 2 },
          { name: '子节点2', id: 3 }
        ])
      }, 500)
    }
  }
}
</script>

性能优化技巧

对于大型树结构，采用虚拟滚动技术可以显著提升性能：

<template>
  <virtual-tree
    :data="bigTreeData"
    :item-size="30"
    :height="500"
  >
    <template v-slot="{ item }">
      <div>{{ item.name }}</div>
    </template>
  </virtual-tree>
</template>

可以使用 vue-virtual-scroller 等库实现虚拟滚动功能。

样式定制

通过 CSS 可以自定义树形结构的样式：

.tree-node {
  padding-left: 20px;
  position: relative;
}

.tree-node:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ccc;
}

.tree-node:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: #ccc;
}

.tree-node:last-child:before {
  height: 50%;
}

vue实现列表树加载