当前位置: 首页 > news >正文

el-table树状表格,默认展开第一个节点的每一层

效果如图
在这里插入图片描述

<template><el-table:data="tableData"style="width: 100%":tree-props="{ children: 'children', hasChildren: 'hasChildren' }":expand-row-keys="expandRowKeys"row-key="id"@expand-change="handleExpandChange"><el-table-columnprop="name"label="名称"width="180"></el-table-column><el-table-columnprop="value"label="值"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{id: 1,name: "一级1",value: "A",children: [{id: 2,name: "二级1-1",value: "A-1",children: [{ id: 3, name: "三级1-1-1", value: "A-1-1" },{ id: 4, name: "三级1-1-2", value: "A-1-2" }]},{id: 5,name: "二级1-2",value: "A-2",children: [{ id: 6, name: "三级1-2-1", value: "A-2-1" }]}]},{id: 7,name: "一级2",value: "B",children: [{id: 8,name: "二级2-1",value: "B-1",children: [{ id: 9, name: "三级2-1-1", value: "B-1-1" }]}]}],expandRowKeys: [], // 保存展开的行的key};},methods: {// 递归函数来获取每层的第一个节点id getFirstNodeKeys(data) {let keys = [];data.forEach(item => {keys.push(item.id); // 添加当前节点的idif (item.children && item.children.length) {keys = keys.concat(this.getFirstNodeKeys(item.children)); // 递归获取子节点的第一个}});return keys;},// 处理展开行的变化handleExpandChange(row, expandedRows) {// 可选处理扩展展开事件}},created() {// 初始化时设置默认展开每一层第一个节点// 注意!!!展开节点id数组必须是字符串的this.expandRowKeys = this.getFirstNodeKeys(this.tableData);}
};
</script><style scoped>
</style>

相关文章:

el-table树状表格,默认展开第一个节点的每一层

效果如图 <template><el-table:data"tableData"style"width: 100%":tree-props"{ children: children, hasChildren: hasChildren }":expand-row-keys"expandRowKeys"row-key"id"expand-change"handleExpan…...

RPA-实例(UiPath )

UiPath 是一个流行的机器人流程自动化(RPA)工具,用于自动化重复性任务。以下是一个简单的实例,展示如何使用 UiPath 自动化一个常见的任务:从 Excel 文件中读取数据并将其输入到网页表单中。 实例:从 Excel 读取数据并自动填写网页表单 步骤 1:准备工作 安装 UiPath S…...

【RabbitMQ业务幂等设计】RabbitMQ消息是幂等的吗?

在分布式系统中&#xff0c;RabbitMQ 自身不直接提供消息幂等性保障机制&#xff0c;但可通过业务逻辑设计和技术组合实现消息处理的幂等性。以下是 8 种核心实现方案及最佳实践&#xff1a; 一、消息唯一标识符 (Message Deduplication) 原理 每条消息携带全局唯一ID&#xff…...

Spring Boot项目开发常见问题及解决方案(上)

启动相关问题 问题 1&#xff1a;项目启动时报错“找不到主类” 在使用 Spring Boot 打包成可执行 JAR 文件后启动&#xff0c;有时会遇到这个头疼的问题。通常是因为打包配置有误或者项目结构不符合要求。 解决方案&#xff1a; 首先&#xff0c;检查 pom.xml&#xff08;Ma…...

具有整合各亚专科医学领域知识能力的AI智能体开发纲要(2025版)

整合各亚专科医学领域知识能力的AI代理的开发与研究 一、引言 1.1 研究背景 在科技飞速发展的当下,人工智能(AI)已成为推动各行业变革的关键力量,医疗领域也不例外。近年来,AI 在医疗行业的应用取得了显著进展,从医学影像诊断到疾病预测,从药物研发到个性化医疗,AI 技…...

Selenium实战案例1:论文pdf自动下载

在上一篇文章中&#xff0c;我们介绍了Selenium的基础用法和一些常见技巧。今天&#xff0c;我们将通过中国科学&#xff1a;信息科学网站内当前目录论文下载这一实战案例来进一步展示Selenium的web自动化流程。 目录 中国科学&#xff1a;信息科学当期目录论文下载 1.网页内…...

进程的介绍--进程状态/切换

1.冯 • 诺依曼体系结构 1.1 体系结构 冯•诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。数学家冯•诺依曼提出了计算机制造的三个基本原则&#xff0c;即采用二进制逻辑、程序存储执行以及计算机由五个部分组成&#x…...

一文详解U盘启动Legacy/UEFI方式以及GPT/MBR关系

对于装系统的老手而说一直想研究一下装系统的原理&#xff0c;以及面对一些问题时的解决思路&#xff0c;故对以前的方法进行原理上的解释&#xff0c;主要想理解其底层原理。 引导模式 MBR分区可以同时支持UEFI和Legacy引导&#xff0c;我们可以看一下微pe制作的启动盘&#…...

【面试】Redis 常见面试题

一、介绍一下什么是 Redis&#xff0c;有什么特点? Redis 是一个高性能的 key-value 内存数据库。 不同于传统的 MySQL 这样的关系型数据库&#xff0c;Redis 主要使用内存存储数据&#xff08;当然也支持持久化存储到硬盘上&#xff09;&#xff0c;并非是使用 “表” 这样…...

扩散模型中,Flow Matching的训练方式相比于 DDPM 训练方法有何优势?

在扩散模型中,Flow Matching(FM)相比DDPM(Denoising Diffusion Probabilistic Models)的训练方法具有以下核心优势: 1. 更简单的训练目标 DDPM:通过逐步预测噪声来间接优化数据分布的变分下界(ELBO),需要设计多步的噪声调度策略,训练目标依赖马尔可夫链的分解。Flow…...

Unity FBXExport导出的FBX无法在Blender打开

将FBX转换为obj&#xff1a; Convert 3D models online - free and secure...

【无标题】基于Unity写一个DelayInvoke方法

没想到来得这么块,程序员可能比司机先失业了。。。。。。。。 //测试过一定要这么调用??奇怪的是,不能(mono 直接引用)??///但AI还是给出了能用的代码 MonoBehaviourExtensions.DelayInvoke(this,()=> { },3); /* 方案一,使用示例(): public class ExampleUsag…...

JavaScript 语言基础之标签语句

标签语句的语法 label: statement label 表示标签名&#xff0c;可以是任何合法的标识符&#xff0c;但不能是 JavaScript 中的保留字。statement 表示被标记的语句块&#xff0c;可以是任何合法的 JavaScript 语句。 用法 标签语句的主要用途是在代码中进行跳转&#xff0…...

【网络编程】网络编程基础:TCP/UDP 协议

一、什么是网络&#xff1f; 网络是信息传输&#xff0c;接收和共享的虚拟世界&#xff0c;通过把网络上的信息汇聚在一起&#xff0c;将这些资源进行共享。 初衷&#xff1a;知识共享。这里不得不提到Internet 的历史&#xff0d;它其实是“冷战”的产物&#xff1a; 1957年…...

idea 部署 AJ-Report 启动的注意事项

AJ-Report 入门参考&#xff1a; AJ-Report 初学(入门教程) gitee 下载&#xff1a;https://gitee.com/anji-plus/report/releases 根据上面提供的 gitee 下载链接&#xff0c;点击直接下载 最上面的就是最新版本的&#xff0c;旧版本往下拉就可以找到&#xff0c;有三个下载…...

C# 生成二维码隐藏ASCII码

在 C# 中生成二维码时&#xff0c;如果需要隐藏或过滤掉 ASCII 码中的控制字符或不可见字符&#xff0c;可以在生成二维码之前对输入文本进行处理。以下是完整的实现步骤和代码示例&#xff1a; 1. 过滤 ASCII 码中的控制字符 ASCII 码中&#xff0c;0 到 31 以及 127 是控制字…...

python有没有不同精度的整型类型?

在 Python 中&#xff0c;不像 C、Java 等语言有明确的不同精度整型类型&#xff08;如 int8、int16、int32、int64 等&#xff09;&#xff0c;Python 提供了统一的整数类型 int&#xff0c;它可以处理任意大小的整数&#xff0c;没有固定的精度限制。不过&#xff0c;Python …...

Python多线程编程理解面试题解析

一、多线程介绍 Python 的多线程是一种实现并发编程的方式&#xff0c;允许程序同时执行多个任务。然而&#xff0c;由于 Python 的全局解释器锁&#xff08;GIL&#xff09;的存在&#xff0c;多线程在某些场景下可能无法充分利用多核 CPU 的性能。以下是对 Python 多线程的理…...

网络协议相关知识有哪些?

前言 网络协议的基础是OSI和TCP/IP模型,这两个模型是理解协议分层的关键。 正文(仅是个人理解,如有遗漏望海涵) 网络协议是网络中设备间通信的规则和标准,涉及数据传输、路由、错误控制等多个方面。以下是网络协议相关知识的系统梳理: 一、网络协议分层模型 1、OSI七…...

【并发压测】高并发下Linux流量监控

在高并发环境下&#xff0c;Linux流量监控至关重要&#xff0c;可以帮助您确保网络性能和稳定性。以下是一些常用的Linux流量监控工具和方法&#xff1a; 1. **iftop**&#xff1a;iftop 是一款实时的网络流量监控工具&#xff0c;可以显示当前服务器上每个网络接口的流量使用情…...

Spring Boot项目中解决跨域问题(四种方式)

目录 一&#xff0c;跨域产生的原因二&#xff0c;什么情况下算跨域三&#xff0c;实际演示四&#xff0c;解决跨域的方法 1&#xff0c;CrossOrigin注解2&#xff0c;添加全局过滤器3&#xff0c;实现WebMvcConfigurer4&#xff0c;Nginx解决跨域5&#xff0c;注意 开发项目…...

革新之力:数字科技——重塑未来的超越想象之旅

在21世纪的科技浪潮中&#xff0c;数字科技如同一股不可阻挡的洪流&#xff0c;正以前所未有的速度和广度改变着我们的生活、工作乃至整个社会的结构。它不仅是技术的简单迭代&#xff0c;更是对人类社会认知边界的拓宽&#xff0c;对经济模式、社会治理、文化形态等多方面的深…...

matlab和java混合编程经验分享

最常用的就是可以查到再控制栏deploytool选择library complier打包&#xff0c;但是有问题就是比如果用了外部的求解器比如yalmip或者cplex的话用这个方法会找不到外部的求解器&#xff0c;网上找了很多&#xff0c;基本都大同小异。 后面分享一个亲测有效的打包方法&#xff0…...

rk3588/3576板端编译程序无法运行视频推理

图片推理可以&#xff0c;但是视频不行&#xff0c;运行视频推理报错&#xff1a;segment fault. 我遇到的问题原因是ffmpeg安装有问题&#xff0c;可以先在板端运行&#xff1a;ffmpeg -version ffmpeg version 4.2.4-1ubuntu1.0firefly6 Copyright (c) 2000-2020 the FFmpe…...

MATLAB在数据分析和绘图中的应用:从基础到实践

引言 股票数据分析是金融领域中的重要研究方向&#xff0c;通过对历史价格、成交量等数据的分析&#xff0c;可以帮助投资者更好地理解市场趋势和做出决策。MATLAB作为一种强大的科学计算工具&#xff0c;提供了丰富的数据处理和可视化功能&#xff0c;非常适合用于股票数据的…...

【CS285】高斯策略对数概率公式的学习笔记

公式介绍 在【CS285】中提到了高斯策略对数概率公式的公式如下&#xff1a; log ⁡ π θ ( a t ∣ s t ) − 1 2 ∥ f ( s t ) − a t ∥ Σ 2 const \log \pi_{\theta}(\mathbf{a}_t | \mathbf{s}_t) -\frac{1}{2} \left\| f(\mathbf{s}_t) - \mathbf{a}_t \right\|_{\S…...

windows环境下用docker搭建php开发环境dnmp

安装WSL WSL即Linux子系统&#xff0c;比虚拟机占用资源少&#xff0c;安装的前提是系统必须是win10以上。 WSL的安装比较简单&#xff0c;网上有很多教程&#xff0c;例如&#xff1a;WSL简介与安装流程&#xff08;Windows 下的 Linux 子系统&#xff09;_wsl安装-CSDN博客&…...

区块链中的递归长度前缀(RLP)序列化详解

文章目录 1. 什么是RLP序列化&#xff1f;2. RLP的设计目标与优势3. RLP处理的数据类型4. RLP编码规则详解字符串的编码规则列表的编码规则 5. RLP解码原理6. RLP在以太坊中的应用场景7. 编码示例分析8. 总结 1. 什么是RLP序列化&#xff1f; 递归长度前缀&#xff08;RLP&…...

PHP建立MySQL持久化连接(长连接)及mysql与mysqli扩展的区别

如果在 PHP 5.3 的版本以前想要创建MySQL的持久化连接(长连接)&#xff0c;需要显式调用 pconnect 创建&#xff1a; $con mysql_pconnect($server[host], $server[username], $server[password]); if (!($con false)) { if (mysql_select_db($server[database], $con) fals…...

基于Python+Django+Vue的旅游景区推荐系统系统设计与实现源代码+数据库+使用说明

运行截图 功能介绍 前台功能包括&#xff1a;首页、详情页、订单、用户中心。后台功能包括&#xff1a;首页、轮播图管理、管理员、卖家管理、买家管理、景区管理、订单管理非开源功能&#xff08;分类管理&#xff0c;地区管理&#xff0c;收藏管理&#xff0c;评论管理&a…...

架构学习第七周--Prometheus

目录 一、监控系统基础 二、Prometheus介绍 三、Prometheus单机部署 四、服务发现与告警功能 4.1&#xff0c;服务发现 4.2&#xff0c;告警功能实现 五、Prometheus与Kubernetes 5.1&#xff0c;Kubernetes指标 5.2&#xff0c;Prometheus集群部署 一、监控系统基础…...

基于Nanopi duo2的WiFi智能摄像头

1.固件包烧录 https://wiki.friendlyelec.com/wiki/index.php/NanoPi_Duo2/zh#.E8.BF.9E.E6.8E.A5WiFi 固件包链接以及烧录工具都在上面链接中 烧录过程 使用读卡器将SD卡插入到电脑,然后打开烧录工具 2.通过串口工具连接板子使其连接WiFi 对应的串口工具,就是这个HyperT…...

Hive Orc表数据导出和导入

导出到hdfs&#xff1a;hive执行 INSERT OVERWRITE DIRECTORY /test/hdfs_dir ROW FORMAT DELIMITED FIELDS TERMINATED BY \t STORED AS ORC SELECT * FROM hive_table; HDFS导出到本地&#xff1a;shell执行 hdfs dfs -get /test/hdfs_dis/file_name /linux_dir/xxx 本…...

Python爬虫实战:从零到一构建数据采集系统

文章目录 前言一、准备工作1.1 环境配置1.2 选择目标网站 二、爬虫实现步骤2.1 获取网页内容2.2 解析HTML2.3 数据保存 三、完整代码示例四、优化与扩展4.1 反爬应对策略4.2 动态页面处理4.3 数据可视化扩展 五、注意事项六、总结互动环节 前言 在大数据时代&#xff0c;数据采…...

Ubuntu 的RabbitMQ安装

目录 1.安装Erlang 查看erlang版本 退出命令 2. 安装 RabbitMQ 3.确认安装结果 4.安装RabbitMQ管理界面 5.启动服务并访问 1.启动服务 2.查看服务状态 3.通过IP:port 访问界面 4.添加管理员用户 a&#xff09;添加用户名&#xff1a;admin&#xff0c;密码&#xff1…...

七星棋牌源码高阶技术指南:6端互通、200+子游戏玩法深度剖析与企业级搭建实战(完全开源)

在棋牌游戏行业高速发展的今天&#xff0c;如何构建一个具备高并发、强稳定性与多功能支持的棋牌游戏系统成为众多开发者和运营团队关注的焦点。七星棋牌全开源修复版源码 凭借其 六端互通、200子游戏玩法、多省区本地化支持&#xff0c;以及 乐豆系统、防沉迷、比赛场、AI智能…...

cuda安装

cuda WSL2急速搭建CUDA体验环境_wsl2 cuda-CSDN博客 cudnn cuDNN Archive | NVIDIA Developer pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118...

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_os_init 函数

ngx_os_init 声明在 src/os/unix/ngx_os.h ngx_int_t ngx_os_init(ngx_log_t *log); 定义在 src\os\unix\ngx_posix_init.c ngx_int_t ngx_os_init(ngx_log_t *log) {ngx_time_t *tp;ngx_uint_t n; #if (NGX_HAVE_LEVEL1_DCACHE_LINESIZE)long size; #endif#if (NGX…...

记录一次部署PC端网址全过程

当我查看我之前写的文章时、顿时惊奇发出感慨&#xff1a;啥时候写的&#xff1f;是我写的么&#xff1f;疑惑重重… 所以说&#xff0c;好记性不如烂笔头。 记录一次部署PC端网址全过程 部署PC端网址分是三步&#xff1a;第一步&#xff1a;申请域名并映射到外网IP &#xff0…...

QML 实现一个动态的启动界面

QML 实现一个动态的启动界面 一、效果查看二、源码分享三、所用到的资源下载 一、效果查看 二、源码分享 工程结构 main.qml import QtQuick import QtQuick.Controls import QtQuick.Dialogs import Qt.labs.platformWindow {id:windowwidth: 640height: 400visible: truetit…...

视频HDR技术详解,你的电脑怎么播放HDR视频?

闲聊&#xff1a;前两天在b站上面看到影视飓风的视频&#xff0c;让我有点疑惑&#xff0c;我不知道为什么播放视频有设备撑不住一说&#xff0c;所以感兴趣去ytb下载了4k原片30hz刷新的&#xff0c;然后测试一下我的电脑能不能播放&#xff0c;发现还是可以的&#xff0c;视觉…...

Spring统一功能处理:拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核功能之&#xff0c;主要来拦截的请求&#xff0c;在指定法前后&#xff0c;根据业务需要执预先设定的代码。 也就是说&#xff0c;允许开发员提前预定义些逻辑&#xff0c;在的请…...

2025年度福建省职业院校技能大赛高职组“信息安全管理与评估”赛项规程

2025 年度福建省职业院校技能大赛 高 职组“ 信息安全管理与评估 ”赛项规程 一、赛项名称 省赛编号&#xff1a;GZ032 赛项名称&#xff1a;信息安全管理与评估 赛项组别&#xff1a;高职组 竞赛形式&#xff1a; 团体赛 二、竞赛目的 为全面贯彻落实国家网络强国战略&#x…...

Vue 中 nextTick 的原理详解

1. 为什么需要 nextTick Vue 采用 异步渲染机制&#xff0c;当响应式数据发生变化时&#xff0c;Vue 并不会立即更新 DOM&#xff0c;而是将这些变化放入一个 队列 中&#xff0c;并在 同一事件循环&#xff08;Event Loop&#xff09;中合并相同的修改&#xff0c;最后执行批…...

vue 手写分页

【先看效果】 &#xff08;1&#xff09;内容小于2页 不展示页码 &#xff08;2&#xff09;1 < 内容页数< 限定展示页码 展示&#xff1a;页码、上下页&#xff1b;隐藏&#xff1a;首页、末页图标&#xff0c;上、下一区间码。即&#xff1a;&#xff08;页数&#…...

跟着柳叶刀数字健康,学习如何通过病理切片预测分子分类对预后的影响|项目复现

小罗碎碎念 项目复现 今天和大家分享一个非常具有参考价值的项目,手把手带着大家复现一篇发表在柳叶刀数字健康的文章。 花了六个小时才完成的这篇推送,信息量非常大,遇到了很多报错问题,但是解决以后的感觉是非常爽的,先给大家展示一下最终的成果——在同一张切片上,通…...

DuodooBMS源码解读之 sale_change模块

销售变更模块用户使用手册 一、模块概述 本扩展模块主要包含两个主要的 Python 文件&#xff1a;sale_change/report/sale_change_report.py 和 sale_change/wizard/sale_change_download.py&#xff0c;提供了销售变更报表查看和销售变更单下载的功能。以下是详细的使用说明…...

基于 Highcharts 实现 Vue 中的答题统计柱状图组件

在现代 Web 开发中&#xff0c;数据可视化是一个重要的组成部分&#xff0c;而 Highcharts 是一个广泛使用的 JavaScript 图表库&#xff0c;可以帮助开发者在 Web 页面上轻松地绘制丰富的图表。在本文中&#xff0c;我们将基于 Highcharts 创建一个用于答题统计的柱状图&#…...

MySQL 插入更新语句(insert…on duplicate key update语句 )

我们日常在使用 insert into 语句向表中插入数据时&#xff0c;一定遇到过主键或唯一索引冲突的情况&#xff0c;当遇到这种情况时&#xff0c;MySQL默认的反应是报错并停止执行后续的语句&#xff0c;为了避免这种情况&#xff0c;你有3种选择&#xff1a; 使用insert ignore…...

Jenkins整合Jmeter实现接口自动化测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、安装jmeter 下载&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 这里我用了一台Windows安装jmeter用来写接口测试的脚本&#xff0c;启动前修改j…...