javascript - vue3 递归list怎么让他子集有父级也显示？
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变成递归的。
共有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 // 返回子级的状态，决定父级状态}-
我需要从数据库显示菜单的帮助。以下是数据库表中的数组结果： 我已经成功地从以下代码开发菜单树： 它打印所需的输出。 我需要的是每次点击菜单， 其所有子项（如果有更多子项，则在单击之前不应打印） “仅”将与父菜单id为0（而非子菜单）的其他主菜单一起打印在屏幕上。 我需要以下输出被生产。（步骤）。 在第一步1： 单击“主菜单1”时： 单击“子菜单1.2”时： 单击“主菜单3”时 当点击"子菜单3.2
-
可以在getData()方法中多次调用QueryList来实现递归多级采集。 使用场景：如采集多级菜单，需要先采集第一级菜单，然后采集第二级菜单，以此类推。 示例采集代码: <?php require 'QueryList/vendor/autoload.php'; use QL\QueryList; //获取每个li里面的h3标签内容，和class为item的元素内容 $html =<<<S
-
问题内容： 我不知道如何选择查询递归。 如何使用SqlServer取得这样的结果 问题答案： 您需要使用递归公用表表达式。 在线上有很多有用的文章。 有用的链接 简单谈谈：SQL Server CTE基础 blog.sqlauthority：递归CTE 这是您的问题的解决方案：
-
我把这张桌子填满了 当选择IDFolder=1的文件夹时，应该为返回此文件夹的所有子文件夹和子文件夹（2,3,4,5,6,7） 当我选择文件夹id=4==>(5,7,6）时
-
问题内容： 在下面的例子中 我懂了 在我的数据库中，表中有数百万行，而且层次结构又深又宽，我对所有子级都不感兴趣。我可以派生出我感兴趣的孩子。因此，我想打开查询并向START WITH提供孩子ID。然后，我想递归输出父级，直到到达顶部。在我的情况下，顶部是id和parent_id相等的地方。这是我正在尝试的方法，但无法显示顶级父级。 这给了我 它没有输出AA。可以这样做吗？我希望不会在输出中将pa
-
问题内容： 我有一张桌子 我填写这个表 选择idFolder = 1的文件夹时，应返回该文件夹和子子文件夹的所有子文件夹（2，3，4，5，6，7） 当我选择文件夹ID = 4 ==>（5,7，6） 当我选择文件夹ID = 3 ==>（4，5,6，7） 一个查询该怎么做？ 谢谢 问题答案： 这是工作中的一个 在此处查看SQL固件：http：//sqlfiddle.com/#！2 / 02b78 /