2023如何使用 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 则表示是根节点。

二、树状图的构建

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

function buildTree(list, parentId) {
    let res = []
    for (let i = 0; i < list.length; i++) {
        if (list[i].parent_id === parentId) {
            let children = buildTree(list, list[i].id)
            if (children.length) {
                list[i].children = children
            }
            res.push(list[i])
        }
    }
    return res
}

let treeData = buildTree(list, 0)

三、列表的展示

Vue 提供了 v-for 指令用于循环渲染数据，我们可以使用递归组件来实现流畅的无限级列表展示。

在组件内，我们可以定义一个 <template> 标签，用于渲染当前节点及其子节点，如果当前节点存在子节点，则递归渲染子节点。在递归组件中，我们可以使用 props 来传递数据。

<template>
    <ul>
        <li v-for="item in list">
            {{item.name}}
            <recursive :list="item.children"></recursive>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'recursive',
    props: {
        list: Array
    }
}
</script>

上述代码中，我们使用递归组件 recursive，在循环渲染每个节点时，使用 <recursive> 标签对当前节点的子节点进行递归渲染。

四、节点的折叠和展开

无限级列表通常会有折叠和展开节点的功能，我们需要在组件中添加 isCollapsed 属性来表示当前节点是否折叠，并根据该属性来控制子节点的显示。

<template>
    <ul>
        <li v-for="item in list">
            <div @click="isCollapsed = !isCollapsed">{{item.name}}</div>
            <recursive v-show="!isCollapsed" :list="item.children"></recursive>
        </li>
    </ul>
</template>
<script>
export default {
    name: 'recursive',
    props: {
        list: Array
    },
    data() {
        return {
            isCollapsed: true
        }
    }
}
</script>

上述代码中，我们在节点名称所在的 <div> 标签上添加了点击事件，点击时将 isCollapsed 属性取反，并使用 v-show 控制子节点的显示。

五、总结

通过以上实例，我们可以了解到在 Vue 中实现无限级列表主要的三个步骤：数据结构的设计、树状图的构建和列表的展示。同时，我们还介绍了如何添加节点的折叠和展开功能，实现交互效果。

无限级列表的实现是一个经典的 Vue 组件开发案例，深入理解该案例有助于提高 Vue 的开发技能和水平，也可以为组件的设计和开发提供有益的参考。