vue3 递归循环展示下级盒子

在这里插入图片描述

index.vue主文件

<template><div><RecursiveCard :data="rootTask" /></div>
</template><script>
import { reactive } from 'vue';
import RecursiveCard from './test.vue'; // 递归组件的路径export default {components: {RecursiveCard,},setup() {const rootTask = reactive({list: ['List item 1', 'List item 2', 'List item 3', 'List item 4'],children: []});return {rootTask};}
};
</script><style>
/* 这里可以添加一些全局样式 */
</style>

test.vue子组件【递归】


<template><el-card style="margin-bottom: 20px;"><template #header><div class="card-header"><span><el-button type="primary" @click="addSubTask">新增子作业</el-button></span></div></template><p v-for="(item, index) in data.list" :key="index" class="text item">{{ item }}</p><template #footer>Footer content</template><div v-if="data.children && data.children.length"><RecursiveCard v-for="(child, index) in data.children" :key="index" :data="child" /></div></el-card>
</template><script>
export default {name: 'RecursiveCard',props: {data: {type: Object,required: true,},},methods: {addSubTask() {// 这里添加子作业逻辑const newSubTask = {list: ['List item 1', 'List item 2', 'List item 3', 'List item 4'],children: []  // 你可以根据需要初始化子作业的 children};if (!this.data.children) {this.$set(this.data, 'children', []);}this.data.children.push(newSubTask);},},
};
</script><style scoped>
/* 这里可以添加一些局部样式 */
</style>

在这里插入图片描述

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

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

相关文章

广东智慧物流2024年端午节放假安排

广东智慧物流2024年端午节放假安排

使用HTML、CSS和JavaScript编写一个注册界面(一)

倘若文章或代码中有任何错误或疑惑&#xff0c;欢迎提出交流哦~ HTML和CSS 首先&#xff0c;我们需要编写一个简洁的注册界面。 简单编写下&#xff0c;如下&#xff1a; 呈现效果为&#xff1a; <!DOCTYPE html> <html lang"en"><head><me…

从普通篮球场到高端气膜馆:全新运动体验的打造—轻空间

在现代体育设施的发展中&#xff0c;气膜馆以其独特的优势和创新设计&#xff0c;正在改变我们对运动场所的传统认知。将一片普通的篮球场转变为高逼格的气膜馆&#xff0c;不仅可行&#xff0c;而且能提供极大的便利和众多的好处&#xff0c;让运动体验更上一层楼。 气膜馆的优…

巨详细Linux卸载Redis教程

巨详细Linux卸载Redis教程 1、检查系统残留redis数据2、卸载系统残留redis数据 1、检查系统残留redis数据 redis等数据相关中间件安装前一定要进行残留数据检查&#xff0c;排除后期存在的各种隐患。 #检查有没有残留客户端 whereis redis-cli #检查有没有残留服务 whereis r…

Git 版本控制系统详解

目录 Git 版本控制系统详解一、Git 的作用1. 版本控制2. 分支管理3. 分布式开发4. 协作开发 二、Git 的安装和基本使用1. 安装 Git1.1 Windows1.2 macOS1.3 Linux 2. 配置 Git3. 创建和克隆仓库3.1 创建本地仓库3.2 克隆远程仓库 4. 基本操作4.1 添加文件到暂存区4.2 提交更改4…

开发项目功能开发设计模板

功能开发设计是一个系统化的过程&#xff0c;旨在确保新功能的开发既满足用户需求又符合技术标准。以下是一个适用于大多数软件开发项目功能开发设计模板&#xff1a;

94、python-第三阶段-4-数据计算-map方法

直接运行会报错&#xff0c;需要配置下python环境变量 from pyspark import SparkConf,SparkContext import os os.environ[PYSPARK_PYTHON]"D:/Program Files/Python/Python3.13/python.exe" conf SparkConf().setMaster("local[*]").setAppName("…

python安装Django

转国内源 添加链接描述 安装 pip install setuptools安装Django 添加链接描述 pip install django3.2 查看版本 python -m django --version 我的django安装路径&#xff1a;安装python的路径 C:\Program Files\Python38\Lib\site-packages\django\bin 配置django环境变量…

邦芒支招:4招减轻工作压力让你工作更轻松

​​“弱肉强食&#xff0c;适者生存”&#xff0c;这是现代社会唯一的生存法则。就拿公司而言&#xff0c;可能昨天还市值几百亿&#xff0c;今天就能宣告破产。而身在职场的你&#xff0c;也不得不时时刻刻绷着一根弦&#xff0c;不然就有可能被淘汰&#xff0c;每个职场人都…

解析!领先的Web应用程序安全测试工具—Burp Suite

Burp Suite 是一款领先的Web应用程序安全测试工具。它被广泛用于识别和修复Web应用程序中的漏洞。 通过使用Burp Suite&#xff0c;组织可以显著提升其Web应用程序的安全性&#xff0c;及时发现并修复漏洞&#xff0c;保障业务的持续运行和数据安全。 Burp Suite 最新版下载h…

学习Python的基础知识

目录 摘要 Python 的主要特点 基本语法 1. 变量和数据类型&#xff1a; 2. 条件语句&#xff1a; 3. 循环&#xff1a; 4. 函数&#xff1a; 5. 类和对象&#xff1a; 6. 列表和字典&#xff1a; 7. 文件I/O&#xff1a; Python 的学习路线 如何高效使用 Python 的…

Docker面试整理-如何优化Docker容器的性能?

优化Docker容器的性能可以从多个方面入手,以下是一些建议: 选择合适的基础镜像:使用轻量级的基础镜像,如基于Alpine Linux的镜像,可以减少镜像的大小和启动时间。避免使用过于庞大的操作系统镜像。优化Dockerfile:减少Dockerfile中的不必要指令和层,以最小化镜像的大小。…

go中的指针详解

因为大一的时候c语言没学好,所以看到指针很心烦 ,后来速成了一遍go ,每每写道指针部分就开始遗忘 ,所以专门对指针部分做了此笔记 概念 在 Go 语言中&#xff0c;指针是一种变量类型&#xff0c;它存储的是另一个变量的内存地址。通过指针&#xff0c;你可以访问和修改它指向…

商业代理:利用代理服务器进行市场研究和竞争分析

代理是一种转换设备网络流量并从技术上使用户隐形的工具。个人使用它们来隐藏他们的在线活动并绕过地理限制。企业使用它们来支持他们的市场和竞争对手研究等。 继续阅读以了解代理的特点以及它们为企业研究工作带来的优势。 代理的主要功能 代理服务器是设备和网站服务器之间…

CentOS 7.8上安装ClamAV

在CentOS 7.8上安装ClamAV涉及几个步骤&#xff0c;包括安装ClamAV本身以及其命令行扫描工具和守护进程。以下是详细的安装指南&#xff1a; 1. 添加EPEL仓库 首先&#xff0c;确保已经安装了Extra Packages for Enterprise Linux (EPEL)仓库&#xff0c;因为ClamAV包在CentO…

Transformer学习(4)

上篇文章完成了Transformer剩下组件的编写&#xff0c;因此本文就可以开始训练。 本文主要介绍训练时要做的一些事情&#xff0c;包括定义损失函数、学习率调整、优化器等。 下篇文章会探讨如何在多GPU上进行并行训练&#xff0c;加速训练过程。 数据集简介 从网上找到一份中…

出图效率倍增!47个高质量的 Stable Diffusion 常用模型推荐

“选用适当的模型&#xff0c;随随便便出个图&#xff0c;都要比打上一堆提示词的效果要好。” 事实如此&#xff0c;高质量的模型&#xff0c;能够成倍提升出图质量。目前 CivitAI&#xff08;俗称 C 站&#xff0c; https://civitai.com/ &#xff09;是业内比较成熟的一个 …

什么是HTTPS协议,与HTTP协议有什么区别

HTTPS&#xff08;超文本传输安全协议&#xff09;是一种用于安全通信的网络协议&#xff0c;它是HTTP协议的安全版本。HTTPS通过在HTTP下层使用SSL/TLS协议来加密数据传输&#xff0c;从而保护数据的机密性和完整性&#xff0c;防止数据在传输过程中被窃听或篡改。 HTTPS的主…

虚拟机【VMware】与Windows之间不能复制粘贴的解决方法

对于刚安装的虚拟机 sudo apt update sudo apt upgrade设置 root密码 sudo passwd root安装 SSH   安装 SSH功能目的是让我们在 Windows下就可以直接通过 ubuntu的IP地址来访问 buntu并直接进入终端命令行。 安装命令&#xff1a;sudo apt-get install openssh-server 重启…

E10:流程主表表单字段值变化触发事件

效果– //window.WeFormSDK.showMessage("这是一个E10的提示", 3, 2); const onClickCreate () > console.log("create"); const onClickSave () > console.log("save"); const onClickCancel () > dialogComponent?.destroy();/…