如何用Vue构建一个无限递归的层级列表？

本文共计1087个文字，预计阅读时间需要5分钟。

Vue 是当前最受欢迎的前端框架之一，其便捷的数据绑定和灵活的组件化思想深受开发者青睐。在开发过程中，经常会遇到需要展示无限级列表的场景。本文将介绍如何使用 Vue 实现无限级列表。

Vue 是当前最受欢迎的前端框架之一，其便捷的数据绑定和灵活的组件化思想备受开发者青睐。在开发中，经常会遇到需要展示无限级列表的场景，本文将介绍如何使用 Vue 实现无限级列表。

一、数据结构的设计

无限级列表的实现需要一种嵌套的数据结构，最基本的数据结构是树状图结构。假如我们需要展示的数据结构如下：

[ {id: 1, name: '菜单1', parent_id: 0}, {id: 2, name: '菜单2', parent_id: 0}, {id: 3, name: '菜单1-1', parent_id: 1}, {id: 4, name: '菜单1-1-1', parent_id: 3}, {id: 5, name: '菜单1-2', parent_id: 1}, {id: 6, name: '菜单2-1', parent_id: 2}, {id: 7, name: '菜单1-1-1-1', parent_id: 4} ]

其中，id 表示节点的唯一标识，name 表示节点名称，parent_id 表示当前节点的父节点的 id，如果为 0 则表示是根节点。

二、树状图的构建

我们需要将原始数据构建成一棵树状图结构，以便于后续的遍历和展示。可以定义一个递归的函数，将节点依次添加到对应的父节点中。