当前位置：首页 > VUE

vue实现多级列表

2026-01-18 13:11:42VUE

实现多级列表的两种常见方法

递归组件法
通过组件递归调用自身实现嵌套渲染，适合动态层级数据。

定义组件时通过name属性使其可递归调用。
模板中使用v-for遍历数据，嵌套部分通过条件渲染递归组件。

示例代码：

vue实现多级列表

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

<script>
export default {
  name: 'TreeList', // 关键：定义name以便递归
  props: ['list']
}
</script>

静态模板法
直接编写嵌套模板结构，适合固定层级场景。

vue实现多级列表

使用多层v-for嵌套，每层对应一级数据。
代码直观但灵活性较低，需手动维护层级。

示例代码：

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

关键注意事项

数据格式：要求嵌套结构包含children字段，如{ id: 1, name: '一级', children: [...] }
性能优化：深层次嵌套时建议添加v-memo或虚拟滚动
样式控制：通过CSS类名（如.level-1/.level-2）区分不同层级缩进

动态加载扩展

若需懒加载子级数据，可结合@click事件和异步请求：

<li @click="loadChildren(item)">
  {{ item.name }}
  <span v-if="item.isLoading">加载中...</span>
</li>

methods: {
  async loadChildren(item) {
    item.isLoading = true;
    item.children = await fetchChildrenData(item.id);
    item.isLoading = false;
  }
}