vue3使用递归组件渲染层级结构

先看看是不是你想要的:

当有层级去渲染的时候,嵌套的层级不明确,这时只能通过递归组件去渲染。

数据如下:

通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。

上代码:(代码是使用uniapp开发的,view标签可进行更换)

父组件
<template><view><my-treev-for="(item, index) in list":key="index":item="item":open="openFirst[index]"@toggleOpen="toggleOpenFirst(index)"/></view>
</template><script setup>
import myTree from './components/myTree.vue';
import { ref, watch } from 'vue';const props = defineProps({list: { // 展示的层级数据type: Array,default: []}
})const openFirst = ref([]); // 控制第一级的展开状态watch(() => props.list, (val) => {if (val.length > 0) {openFirst.value = new Array(val.length).fill(false);}
})const toggleOpenFirst = (index) => {openFirst.value[index] = !openFirst.value[index]; // 切换第一级的展开状态
};
子组件:
<template><view class="link"><view class="linkbg"><view class="links">
// 1、item是父组件传递过来的数据<view class="links-title" @click="goList(item)">{{ item.name }}</view><uv-icon :class="isOpen ? 'arrow-down' : 'arrow-right'" name="arrow-down" v-if="item.subCatalog.length" @click="toggleOpen(item)"></uv-icon></view><Transition><view v-if="isOpen"><view v-for="(subItem, index) in item.subCatalog" :key="subItem.id">
// 调用自身,1处的item便是subItem了<my-tree:item="subItem":open="openTwo[index]"@toggleOpen="toggleSubOpen(index)"/></view></view></Transition></view></view>
</template><script setup>
import { ref } from 'vue';const props = defineProps({item: {type: Object,required: true,},open: {type: Boolean,default: false,},
});const emit = defineEmits(['toggleOpen']);const isOpen = ref(props.open); // 根据 props.open 初始化
const openTwo = ref(new Array(props.item.subCatalog.length).fill(false)); // 初始化子项的展开状态const goList = (val) => {
}const toggleOpen = (val) => {isOpen.value = !isOpen.value; // 切换当前项的展开状态emit('toggleOpen', props.item); // 触发事件
};const toggleSubOpen = (index) => {openTwo.value[index] = !openTwo.value[index]; // 切换子项的展开状态
};</script>

递归组件的思想,便是和使用递归方法一样,自身去调用自身,以达到遍历每一项的数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876118.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将本地 Git 仓库连接到 GitHub 上的远程仓库

将本地 Git 仓库连接到 GitHub 上的远程仓库&#xff0c;并将本地的主要分支推送到远程仓库。 命令解释 git remote add origin https://github.com/xiaoqiuslam/ros_car.git&#xff1a; 这条命令将远程仓库添加为名为 origin 的远程库。 git branch -M main&#xff1a; 这…

利用Python爬取天气数据并实现数据可视化

为了使用Python爬取天气数据并实现数据可视化&#xff0c;我们可以选择几个流行的数据源&#xff0c;比如OpenWeatherMap API&#xff0c;这是一个提供实时和历史天气数据的API。以下是一个简单的步骤指南&#xff0c;包括如何使用Python请求天气数据&#xff0c;并使用Matplot…

C++标准模板(STL)- 概念库 (C++20) - 指定能复制构造和移动构造一个类型的对象 - (std::copy_constructible)

概念库提供基础语言概念的定义&#xff0c;它们能用于进行模板实参的编译时校验&#xff0c;以及基于类型属性的函数派发。这些概念在程序中提供等式推理的基础。 标准库中的大多数概念一同加上了语法及语义要求。通常&#xff0c;编译器只能检查语法要求。若在使用点语义要求…

Oracle系统表空间的加解密

实验环境 数据库选择的是orclpdb1&#xff0c;当前系统表空间未加密&#xff1a; SQL> show con_nameCON_NAME ------------------------------ ORCLPDB1SQL> select TABLESPACE_NAME, STATUS, ENCRYPTED from dba_tablespaces;TABLESPACE_NAME STATUS …

LeetCode Hot100 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

栈和队列的相关练习

用队列实现栈 首先引用上一篇博客中的队列的相关操作 typedef int QDatatype; typedef struct QueueNode {QDatatype data;struct QueueNode* next; }QueueNode;typedef struct Queue {QueueNode* head;QueueNode* tail;int size; }Queue;void QueueInit(Queue* pq) {assert(p…

《Java初阶数据结构》----3.<线性表---LinkedList与链表>

目录 前言 一、链表的简介 1.1链表的概念 1.2链表的八种结构 重点掌握两种 1.3单链表的常见方法 三、单链表的模拟实现 四、LinkedList的模拟实现&#xff08;双链表&#xff09; 4.1 什么是LinkedList 4.2LinkedList的使用 五、ArrayList和LinkedList的区别 前言 …

机器学习(五) -- 无监督学习(1) --聚类1

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;7&#xff09; --SVM2 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 无监督学习&#xff08;1&#xff09; --聚类2 前言 tips&#xff1a;标题前有“***”的内容…

Python 教程(四):Python运算符合集

目录 专栏列表前言1. 算术运算符2. 比较运算符3. 逻辑运算符4. 位运算符5. 赋值运算符6. 成员运算符7. 身份运算符总结 在前三篇教程中&#xff0c;我们学习了 Python 的基本语法和数据结构以及字符串的特性。本篇教程&#xff0c;我们将深入探讨 Python 中的运算符合集。 专栏…

transformers进行学习率调整lr_scheduler(warmup)

一、get_scheduler实现warmup 1、warmup基本思想 Warmup&#xff08;预热&#xff09;是深度学习训练中的一种技巧&#xff0c;旨在逐步增加学习率以稳定训练过程&#xff0c;特别是在训练的早期阶段。它主要用于防止在训练初期因学习率过大导致的模型参数剧烈波动或不稳定。…

搜维尔科技:Patchwork 3D-提高汽车设计的效率和创造力

提高汽车设计的效率和创造力 我们很高兴地宣布推出专为雷诺3DCommerce设计的突破性Blender插件。这款创新工具简化了将车辆配置从Patchwork 3D直接导入领先的免费 3D 建模软件Blender的过程。这款插件彰显了我们致力于提供定制解决方案以满足业务需求的承诺。 主要优点&#x…

使用图数据库Nebula Graph快速上手史上最大规模的中文知识图谱ownthink_v2教程(没写完,明天再写)

一、前言 本教程主要参考官方教程&#xff1a;使用图数据库 Nebula Graph 数据导入快速体验知识图谱 OwnThink (nebula-graph.com.cn) 来带着大家一步一步复现实验内容。 本教程主要使用到的数据集&#xff1a; ownthink/KnowledgeGraphData: 史上最大规模1.4亿中文知识图谱…

python | gunicorn,一个非常实用的 Python 库!

本文来源公众号“python”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;gunicorn&#xff0c;一个非常实用的 Python 库&#xff01; 大家好&#xff0c;今天为大家分享一个非常实用的 Python 库 - gunicorn。 Github地址&…

photoshop学习笔记——选区3 快速选择工具

快速选择工具 W shift W 在3种快速选择工具之间切换 对象选择工具 photoshop CC中没有这个工具&#xff0c;利用AI&#xff0c;将款选中的对象快速的提取选区&#xff0c;测试了一下&#xff0c;选区制作的非常nice快速选择工具 跟磁性套索类似&#xff0c;自动识别颜色相似…

Rust编程- 函数指针与返回闭包

函数指针 &#xff1a; 可以将普通函数传递至其他函数。函数会在传递的过程中被强制转换成fn类型&#xff0c;区别闭包的Fn fn类型也就是所谓的函数指针&#xff08;function pointer&#xff09; fn add_one(x:i32) ->i32{x 1 }fn do_twice(f:fn(i32)-> i32,arg:i32) …

100条牛批的MySql Sql语句排行榜

目录 一、基本查询 1.1 选择所有记录&#xff1a; 1.2 选择特定列&#xff1a; 1.3 过滤记录&#xff1a; 1.4 排序记录&#xff1a; 1.5 限制记录数&#xff1a; 1.6 统计记录数&#xff1a; 1.7 求和&#xff1a; 1.8 平均值&#xff1a; 1.9 最大值&#xff1a; …

02 Redis安装与启动

Redis安装与启动 一、Redis安装与启动 一&#xff09;Redis的安装 ​ 大多数企业都是基于Linux服务器来部署项目&#xff0c;而且Redis官方也没有提供Windows版本的安装包。 1.源码包 ​ github下载链接&#xff08;可选择6.x版本&#xff09;&#xff1a;Releases redis…

ClkLog:开源用户行为分析框架,让数据分析更轻松

ClkLog&#xff1a;开源用户行为分析框架&#xff0c;让数据分析更轻松 在数据驱动的时代&#xff0c;找到一个好用的用户行为分析工具真是难上加难。但是今天你有福了&#xff0c;开源免费的 ClkLog 就是你的不二选择&#xff01;本文将为你详细介绍 ClkLog 的功能特点、技术架…

Spark RPC框架详解

文章目录 前言Spark RPC模型概述RpcEndpointRpcEndpointRefRpcEnv 基于Netty的RPC实现NettyRpcEndpointRefNettyRpcEnv消息的发送消息的接收RpcEndpointRef的构造方式直接通过RpcEndpoint构造RpcEndpointRef通过消息发送RpcEndpointRef Endpoint的注册Dispatcher消息的投递消息…

聚焦民生服务 助力企业发展 区块链应用加速落地

聚焦民生服务&#xff0c;助力企业发展&#xff0c;区块链应用正在加速落地。这一趋势体现了区块链技术在多个领域的广泛应用和深远影响。以下是对这一主题的详细分析&#xff1a; 一、区块链在民生服务中的应用 政务服务 数据共享与打通&#xff1a;区块链技术利用其分布式账…