Vueを使用して無限リストを実装するにはどうすればよいですか?

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、その便利なデータ バインディングと柔軟なコンポーネント化のアイデアが開発者に好まれています。開発では、無限リストを表示する必要があるシナリオに遭遇することがよくありますが、この記事では、Vue を使用して無限リストを実装する方法を紹介します。

1. データ構造の設計

無限レベルのリストの実装には入れ子になったデータ構造が必要であり、最も基本的なデータ構造はツリー構造です。表示する必要があるデータ構造が次のとおりであるとします。

[
    {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 の場合はルート ノードであることを示します。

2. ツリー図の構築

その後の走査と表示を容易にするために、元のデータをツリー図構造に構築する必要があります。再帰関数を定義して、対応する親ノードにノードを順番に追加できます。

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)

3. リスト表示

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> タグを使用して操作を実行します。現在のノードの子ノード 再帰的レンダリング。

4. ノードの折りたたみと展開

無限リストには通常、ノードの折りたたみと展開の機能があります。現在のノードを表すために、コンポーネントに 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 子ノードの表示を制御します。

5. 概要

上記の例を通じて、Vue で無限リストを実装するための 3 つの主な手順 (データ構造の設計、樹形図の構築、リストの表示) を理解できます。同時に、インタラクティブな効果を実現するためにノードの折りたたみ機能と展開機能を追加する方法も紹介しました。

無限レベルのリストの実装は、古典的な Vue コンポーネント開発のケースです。このケースを深く理解することは、Vue 開発スキルとレベルの向上に役立ち、また、設計と開発に有用なリファレンスを提供することもできます。コンポーネントの。

以上がVueを使用して無限リストを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。