Bagaimana untuk melaksanakan senarai tak terhingga menggunakan Vue?

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, pengikatan data yang mudah dan idea komponen yang fleksibel digemari oleh pembangun. Dalam pembangunan, kami sering menghadapi senario di mana kami perlu memaparkan senarai tak terhingga Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan senarai tak terhingga.

1. Reka bentuk struktur data

Pelaksanaan senarai tak terhingga memerlukan struktur data bersarang Struktur data yang paling asas ialah struktur pepohon. Katakan struktur data yang perlu kita paparkan adalah seperti berikut:

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

Antaranya, id mewakili pengecam unik nod, name mewakili nama nod, dan parent_id mewakili id semasa nod induk nod Jika ia adalah 0, ia bermakna ia adalah nod akar. 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. Pembinaan dendrogram

Kita perlu membina data asal ke dalam struktur dendrogram untuk memudahkan traversal dan paparan seterusnya. Anda boleh menentukan fungsi rekursif untuk menambah nod pada nod induk yang sepadan mengikut turutan.

rrreee

3. Paparan senarai

Vue menyediakan arahan v-for untuk data pemaparan gelung Kami boleh menggunakan komponen rekursif untuk mencapai paparan senarai tak terhingga yang lancar. 🎜🎜Dalam komponen, kita boleh mentakrifkan teg <template> untuk memaparkan nod semasa dan nod anaknya Jika nod semasa mempunyai nod anak, nod anak akan dipaparkan secara rekursif. Dalam komponen rekursif, kita boleh menggunakan prop untuk menghantar data. 🎜rrreee🎜Dalam kod di atas, kami menggunakan komponen rekursif rekursif Apabila memaparkan setiap nod dalam gelung, gunakan teg <rekursif> untuk memaparkan nod anak secara rekursif. daripada nod semasa. 🎜🎜4 Melipat dan mengembangkan nod🎜🎜Senarai tak terhingga biasanya mempunyai fungsi melipat dan mengembangkan nod Kita perlu menambah atribut isCollapsed pada komponen untuk menunjukkan sama ada nod semasa runtuh dan berdasarkan. pada atribut ini untuk mengawal paparan nod anak. 🎜rrreee🎜Dalam kod di atas, kami menambahkan acara klik pada teg <div> tempat nama nod terletak Apabila diklik, atribut isCollapsed disongsangkan dan digunakan >v-show mengawal paparan nod anak. 🎜🎜5. Ringkasan🎜🎜Melalui contoh di atas, kita boleh memahami tiga langkah utama untuk melaksanakan senarai tak terhingga dalam Vue: reka bentuk struktur data, pembinaan rajah pokok dan paparan senarai. Pada masa yang sama, kami juga memperkenalkan cara menambah fungsi lipatan dan pengembangan nod untuk mencapai kesan interaktif. 🎜🎜Pelaksanaan senarai peringkat tak terhingga ialah kes pembangunan komponen Vue klasik Pemahaman mendalam tentang kes ini boleh membantu meningkatkan kemahiran dan tahap pembangunan Vue, dan juga boleh memberikan rujukan berguna untuk reka bentuk dan pembangunan komponen. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai tak terhingga menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!