当前位置：首页 > VUE

vue cli实现树形列表

2026-01-22 13:05:18VUE

使用 Vue CLI 实现树形列表

安装依赖

确保已安装 Vue CLI。若未安装，可通过以下命令全局安装：

npm install -g @vue/cli

创建一个新的 Vue 项目：

vue create tree-list-demo

数据结构设计

树形列表通常需要嵌套数据结构。例如：

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

递归组件实现

创建一个递归组件 TreeItem.vue 来渲染树形结构：

vue cli实现树形列表

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

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

主组件调用

在主组件 App.vue 中引入并调用递归组件：

<template>
  <div>
    <ul>
      <TreeItem
        v-for="node in treeData"
        :key="node.id"
        :node="node"
      />
    </ul>
  </div>
</template>

<script>
import TreeItem from './components/TreeItem.vue';

export default {
  components: { TreeItem },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Parent 1',
          children: [
            {
              id: 2,
              label: 'Child 1',
              children: []
            }
          ]
        }
      ]
    };
  }
};
</script>

样式优化

为树形列表添加基础样式，例如缩进和交互效果：

vue cli实现树形列表

ul {
  list-style-type: none;
  padding-left: 20px;
}
li div {
  cursor: pointer;
  padding: 5px;
}
li div:hover {
  background-color: #f0f0f0;
}

动态加载数据

若需动态加载子节点，可通过事件触发异步加载：

methods: {
  async loadChildren(node) {
    if (!node.children.length) {
      const response = await fetch(`/api/children/${node.id}`);
      node.children = await response.json();
    }
    this.isOpen = true;
  }
}

使用第三方库

若需更复杂功能，可考虑使用现成的树形组件库，如 vue-tree-list：

npm install vue-tree-list

示例集成：

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

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

export default {
  components: { VueTreeList },
  data() {
    return {
      treeData: { /* 嵌套结构 */ }
    };
  }
};
</script>

通过以上步骤，可实现一个基础的树形列表，支持递归渲染、动态加载和交互功能。根据实际需求调整数据结构和样式即可。