vue3 递归list怎么让他子集有父级也显示？

Question

searchTitle 改变，如果子集有，父级show也是true怎么做？

// ListTree.vue


<script setup>
defineProps(['data'])
</script>

<template>
    <template v-for="(dt, index) in data" :key="index">
        <li v-if="dt.show">
            <p>{{dt.title}}</p>
            <ul v-if="dt.children && dt.children.length">
                <ListTree :data="dt.children" />
            </ul>
        </li>
    </template>
</template>

<style scoped>

</style>

// index.vue

<script setup>
import {computed, ref} from "vue";
import ListTree from "@/components/ListTree.vue";

const searchTitle = ref()

const list = ref([
    {
        id: 1,
        parent_id: 0,
        title: 'aaaaa',
        show: false,
        children: [
            {
                id: 11,
                parent_id: 1,
                title: 'fffffff',
                show: true,
                children: [
                    {
                        id: 111,
                        parent_id: 11,
                        title: 'yyyyyy',
                        show: true,
                        children: [

                        ]
                    },
                    {
                        id: 112,
                        parent_id: 11,
                        title: 'ooooooo',
                        show: true,
                        children: [

                        ]
                    },
                ]
            },
            {
                id: 12,
                parent_id: 1,
                title: 'ggggggg',
                show: true,
                children: [

                ]
            },
            {
                id: 13,
                parent_id: 1,
                title: 'hhhhhhhh',
                show: true,
                children: [

                ]
            }
        ]
    },
    {
        id: 2,
        parent_id: 0,
        title: 'bbbbb',
        show: true,
        children: [

        ]
    },
    {
        id: 3,
        parent_id: 0,
        title: 'ccccc',
        show: true,
        children: [

        ]
    }
])

const checkChildren = (children) => {
    children.forEach(value => {
        if (searchTitle.value) {
            value.show = value.title.toLowerCase().includes(searchTitle.value.toLowerCase());
        } else {
            value.show = true;
        }
        if (value.children && value.children.length) {
            checkChildren(value.children)
        }
    })
}
const filteredList = computed(() => {
    checkChildren(list.value)
    return list.value;
})
</script>

<template>
    <div><input type="text" v-model.trim="searchTitle" /></div>
    <div>
        <ul>
            <ListTree :data="filteredList" />
        </ul>
    </div>
</template>

<style scoped>

</style>

============================

刚想到一个办法，是不是应是吧list变成不是一个递归的单一数组，然后筛选后把show:true的父级parent_id 如果不是顶级，就再往上一层设置，全部完成后，在把list变成递归的。

Answer 1

给你改造了下

const checkChildren = (children) => {
    let flag = false
    children.forEach(value => {
        let showChild = false
        if (value.children && value.children.length) {
            showChild = checkChildren(value.children) // 接收子级的状态
        }
        value.show = showChild || !searchTitle.value || value.title.toLowerCase().includes(searchTitle.value.toLowerCase())
        flag = flag || value.show
    })
    return flag // 返回子级的状态，决定父级状态
}