Wie implementiert man eine unendliche Liste mit Vue?

Vue ist derzeit eines der beliebtesten Front-End-Frameworks. Seine praktischen Datenbindungs- und flexiblen Komponentenisierungsideen werden von Entwicklern bevorzugt. In der Entwicklung stoßen wir häufig auf Szenarien, in denen wir unendliche Listen anzeigen müssen. In diesem Artikel wird erläutert, wie Sie mit Vue unendliche Listen implementieren.

1. Design der Datenstruktur

Die Implementierung unendlicher Listen erfordert eine verschachtelte Datenstruktur. Angenommen, die Datenstruktur, die wir anzeigen müssen, lautet wie folgt:

[
    {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}
]

Unter diesen stellt id die eindeutige Kennung des Knotens dar, name stellt den Knotennamen dar und parent_id stellt die aktuelle id des übergeordneten Knotens dar. Wenn sie 0 ist, bedeutet dies, dass es sich um den Wurzelknoten handelt. 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 指令用于循环渲染数据，我们可以使用递归组件来实现流畅的无限级列表展示。

在组件内，我们可以定义一个 d477f9ce7bf77f53fbcf36bec1b69b7a 标签，用于渲染当前节点及其子节点，如果当前节点存在子节点，则递归渲染子节点。在递归组件中，我们可以使用 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，在循环渲染每个节点时，使用 0d5e5586b192dc26c49fa85d51858604 标签对当前节点的子节点进行递归渲染。

四、节点的折叠和展开

无限级列表通常会有折叠和展开节点的功能，我们需要在组件中添加 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>

上述代码中，我们在节点名称所在的 dc6dce4a544fdca2df29d5ac0ea9906b 标签上添加了点击事件，点击时将 isCollapsed 属性取反，并使用 v-show

2. Konstruktion eines Dendrogramms

Wir müssen die Originaldaten in eine Dendrogrammstruktur umwandeln, um die anschließende Durchquerung und Anzeige zu erleichtern. Sie können eine rekursive Funktion definieren, um Knoten nacheinander zu den entsprechenden übergeordneten Knoten hinzuzufügen.

rrreee

3. Listenanzeige

Vue stellt die V-for-Anweisung für die Schleifenwiedergabe von Daten bereit. Wir können rekursive Komponenten verwenden, um eine reibungslose unendliche Listenanzeige zu erreichen. 🎜🎜In der Komponente können wir ein d477f9ce7bf77f53fbcf36bec1b69b7a-Tag definieren, um den aktuellen Knoten und seine untergeordneten Knoten zu rendern. Wenn der aktuelle Knoten untergeordnete Knoten hat, werden die untergeordneten Knoten rekursiv gerendert. In rekursiven Komponenten können wir Requisiten verwenden, um Daten zu übergeben. 🎜rrreee🎜Im obigen Code verwenden wir die rekursive Komponente recursive. Wenn Sie jeden Knoten in einer Schleife rendern, verwenden Sie das Tag 0d5e5586b192dc26c49fa85d51858604, um die untergeordneten Knoten rekursiv zu rendern des aktuellen Knotens. 🎜🎜4. Falten und Erweitern von Knoten🎜🎜Listen auf unendlicher Ebene haben normalerweise die Funktion, Knoten zu falten und zu erweitern. Wir müssen der Komponente das Attribut isCollapsed hinzufügen, um anzugeben, ob der aktuelle Knoten reduziert ist. und basierend auf diesem Attribut, um die Anzeige untergeordneter Knoten zu steuern. 🎜rrreee🎜Im obigen Code haben wir ein Klickereignis für das Tag dc6dce4a544fdca2df29d5ac0ea9906b hinzugefügt, in dem sich der Knotenname befindet. Beim Klicken wird das Attribut isCollapsed invertiert Verwendet >v-show steuert die Anzeige von untergeordneten Knoten. 🎜🎜5. Zusammenfassung🎜🎜Anhand der obigen Beispiele können wir die drei Hauptschritte zur Implementierung einer unendlichen Liste in Vue verstehen: den Entwurf der Datenstruktur, den Aufbau des Baumdiagramms und die Anzeige der Liste. Gleichzeitig haben wir auch vorgestellt, wie man die Falt- und Erweiterungsfunktionen von Knoten hinzufügt, um interaktive Effekte zu erzielen. 🎜🎜Die Implementierung von Listen mit unendlichen Ebenen ist ein klassischer Fall der Vue-Komponentenentwicklung. Ein tiefgreifendes Verständnis dieses Falles kann dazu beitragen, die Fähigkeiten und Ebenen der Vue-Entwicklung zu verbessern, und kann auch eine nützliche Referenz für das Komponentendesign und die Entwicklung bieten. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man eine unendliche Liste mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!