Comment implémenter une liste infinie avec Vue ?

Vue est actuellement l'un des frameworks front-end les plus populaires. Ses idées de liaison de données pratiques et de composants flexibles sont privilégiées par les développeurs. En développement, nous rencontrons souvent des scénarios dans lesquels nous devons afficher des listes infinies. Cet article explique comment utiliser Vue pour implémenter des listes infinies.

1. Conception de la structure de données

La mise en œuvre de listes infinies nécessite une structure de données imbriquée. La structure de données la plus élémentaire est une structure arborescente. Supposons que la structure de données que nous devons afficher soit la suivante :

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

Parmi eux, id représente l'identifiant unique du nœud, name représente le nom du nœud et parent_id représente le id actuel du nœud parent du nœud. S'il vaut 0, cela signifie qu'il s'agit du nœud racine. 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

2. Construction du dendrogramme

Nous devons construire les données originales dans une structure de dendrogramme pour faciliter le parcours et l'affichage ultérieurs. Vous pouvez définir une fonction récursive pour ajouter des nœuds aux nœuds parents correspondants en séquence.

rrreee

3. Affichage de la liste

Vue fournit l'instruction v-for pour les données de rendu en boucle. Nous pouvons utiliser des composants récursifs pour obtenir un affichage de liste infini et fluide. 🎜🎜Dans le composant, nous pouvons définir une balise <template> pour restituer le nœud actuel et ses nœuds enfants. Si le nœud actuel a des nœuds enfants, les nœuds enfants seront rendus de manière récursive. Dans les composants récursifs, nous pouvons utiliser des accessoires pour transmettre des données. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le composant récursif recursive Lors du rendu de chaque nœud dans une boucle, utilisez la balise <recursive> pour restituer de manière récursive les nœuds enfants. du nœud actuel. 🎜🎜4. Nœuds pliants et extensibles🎜🎜Les listes de niveau infini ont généralement pour fonction de plier et d'étendre les nœuds. Nous devons ajouter l'attribut isCollapsed au composant pour indiquer si le nœud actuel est réduit, et en fonction de cet attribut pour contrôler l'affichage des nœuds enfants. 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un événement click sur la balise <div> où se trouve le nom du nœud Lorsque vous cliquez dessus, l'attribut isCollapsed est inversé et. utilisé >v-show contrôle l'affichage des nœuds enfants. 🎜🎜5. Résumé🎜🎜A travers les exemples ci-dessus, nous pouvons comprendre les trois étapes principales pour implémenter une liste infinie dans Vue : la conception de la structure des données, la construction de l'arborescence et l'affichage de la liste. Dans le même temps, nous avons également présenté comment ajouter les fonctions de pliage et d'expansion des nœuds pour obtenir des effets interactifs. 🎜🎜L'implémentation de listes de niveaux infinis est un cas classique de développement de composants Vue. Une compréhension approfondie de ce cas peut aider à améliorer les compétences et les niveaux de développement de Vue, et peut également fournir une référence utile pour la conception et le développement de composants. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!