如何使用 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></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></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> 標籤上新增了點擊事件，點擊時將<code>isCollapsed 屬性取反，並使用v-show 控制子節點的顯示。

五、總結

透過上述實例，我們可以了解到在Vue 中實現無限級列表主要的三個步驟：資料結構的設計、樹狀圖的建構和列表的展示。同時，我們也介紹如何新增節點的折疊和展開功能，實現互動效果。

無限級列表的實作是一個經典的 Vue 元件開發案例，深入理解該案例有助於提高 Vue 的開發技能和水平，也可以為元件的設計和開發提供有益的參考。