当前位置: 首页 > 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…...

【雅思博客05】New Guy in Town

Daily Life ‐ New Guy in Town 原文&#xff1a; A: Oh, I don’t know if you heard, but someone moved into that old house down the road. B: Yeah, I know. I met the owner of the house yesterday as he was moving in. His name is Armand. A: Really? What’s h…...

【Spring详解三】默认标签的解析

三、默认标签的解析 Spring的标签中有 默认标签和 自定义标签&#xff0c;两者的解析有着很大的不同&#xff0c;这次重点说默认标签的解析过程。 DefaultBeanDefinitionDocumentReader.class 默认标签的解析是在 DefaultBeanDefinitionDocumentReader.parseDefaultElement()函…...

Windows 图形显示驱动开发-IoMmu 模型

输入输出内存管理单元 (IOMMU) 是一个硬件组件&#xff0c;它将支持具有 DMA 功能的 I/O 总线连接到系统内存。 它将设备可见的虚拟地址映射到物理地址&#xff0c;使其在虚拟化中很有用。 在 WDDM 2.0 IoMmu 模型中&#xff0c;每个进程都有一个虚拟地址空间&#xff0c;即&a…...

简单易懂,解析Go语言中的Channel管道

Channel 管道 1 初始化 可用var声明nil管道&#xff1b;用make初始化管道&#xff1b; len()&#xff1a; 缓冲区中元素个数&#xff0c; cap()&#xff1a; 缓冲区大小 //变量声明 var a chan int //使用make初始化 b : make(chan int) //不带缓冲区 c : make(chan stri…...

STM32 USB 设备的描述信息作用

在使用 STM32 USB 功能时 usbd_desc.c 文件中定义了一段宏&#xff0c;以下解每段宏的用途。 #define USBD_VID 1155 #define USBD_LANGID_STRING 1033 #define USBD_MANUFACTURER_STRING "STMicroelectronics" #define US…...

Redis字符串常见命令(String)

字符串常见命令&#xff08;String&#xff09; Redis 中的字符串类型是一种非常基础且常用的数据类型&#xff0c;它不仅可以存储任何形式的字符串&#xff08;包括文本数据&#xff09;&#xff0c;还可以对数字字符串进行自增、自减等操作。以下是对 Redis 字符串类型常见命…...

Educational Codeforces Round 174 (Rated for Div. 2)(ABCD)

A. Was there an Array? 翻译&#xff1a; 对于整数数组 ​&#xff0c;我们将其相等特征定义为数组 &#xff0c;其中&#xff0c;如果数组 a 的第 i 个元素等于其两个相邻元素&#xff0c;则 &#xff1b;如果数组 a 的第 i 个元素不等于其至少一个相邻元素&#xff0c;则 …...

基于知识图谱的问答系统:后端Python+Flask,数据库Neo4j,前端Vue3(提供源码)

基于知识图谱的问答系统&#xff1a;后端PythonFlask&#xff0c;数据库Neo4j&#xff0c;前端Vue3 引言 随着人工智能技术的不断发展&#xff0c;知识图谱作为一种结构化的知识表示方式&#xff0c;逐渐成为问答系统的重要组成部分。本文将介绍如何构建一个基于知识图谱的问答…...

面试知识点2

文章目录 1. Linux 与 DockerLinux 基本指令VMware 安装 CentOSDocker 拉取镜像创建容器、部署 Spring Boot 项目 2. 关系型数据库 MySQL数据库语法多表关联查询数据库索引 3. 事务与死锁事务的隔离级别死锁的原因和避免方法 4. 排序算法与数据结构二分查找快速排序常见数据结构…...

Django项目之订单管理part1

一.前言 我们前面把django的常用知识点给讲完了&#xff0c;现在我们开始项目部分&#xff0c;项目是一个订单管理系统&#xff0c;我们同时也会在项目之中也会讲一些前面没有用到的知识点。 项目大概流程如下&#xff1a; 核心的功能模块&#xff1a; 认证模块&#xff0c;用…...

基于SSM+Vue的智能汽车租赁平台设计和实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

deepseek本地调用

目录 1.介绍 2.开始调用 2.1模型检验 2.2 通过url调用 3.总结 1.介绍 这篇博客用来教你如何从本地调用ollama中deepseek的模型接口&#xff0c;直接和deepseek进行对话。 2.开始调用 2.1模型检验 首先要保证ollama已经安装到本地&#xff0c;并且已经下载了deepseek模型…...

文件同步工具哪家强?FreeFileSync 免费无限制

FreeFileSync 是一款备受推崇的开源文件同步与备份软件&#xff0c;凭借其卓越的功能和简洁直观的界面&#xff0c;赢得了全球用户的青睐。该软件不仅支持跨平台操作&#xff0c;兼容 Windows、macOS 和 Linux 系统&#xff0c;还能帮助用户在不同设备之间无缝同步文件&#xf…...

捷米特 JM - RTU - TCP 网关应用 F - net 协议转 Modbus TCP 实现电脑控制流量计

一、项目背景 在某工业生产园区的供水系统中&#xff0c;为了精确监测和控制各个生产环节的用水流量&#xff0c;需要对分布在不同区域的多个流量计进行集中管理。这些流量计原本采用 F - net 协议进行数据传输&#xff0c;但园区的监控系统基于 Modbus TCP 协议进行数据交互&…...

Coze扣子怎么使用更强大doubao1.5模型

最近&#xff0c;豆包刚刚发布了最新的doubao1.5系列模型&#xff0c;并且加量不加价。 在性能极大进步的情况下&#xff0c;价格还与之前一致。真是业界良心了。 在同样的价格下&#xff0c;肯定要使用性能更强大的模型嘛 于是我准备把所有的智能体和工作流切换到doubao1.5…...

layui 远程搜索下拉选择组件(多选)

模板使用&#xff08;lay-module/searchSelect&#xff09;&#xff0c;依赖于 jquery、layui.dist 中的 dropdown 模块实现&#xff08;所以data 格式请参照 layui文档&#xff09; <link rel"stylesheet" href"layui-v2.5.6/dist/css/layui.css" /&g…...

嵌入式学习(18)---Linux文件编程中的进程

一、进程的概念 进程:(用来描述 程序动态执行的过程&#xff0c;方便操作系统管理的) 进行中的程序 程序的一次执行过程 (内存 CPU) 程序的实例 程序 ----加载到内存----> 进程 应用场景: 实现并发 同一时刻 同时发生 并行 …...

一.AI大模型开发-初识机器学习

机器学习基本概念 前言 本文主要介绍了深度学习基础&#xff0c;包括机器学习、深度学习的概念&#xff0c;机器学习的两种典型任务分类任务和回归任务&#xff0c;机器学习中的基础名词解释以及模型训练的基本流程等。 一.认识机器学习 1.人工智能和机器学习 人工智能&am…...

RoCE和 TCP的区别

RoCE&#xff08;RDMA over Converged Ethernet&#xff09;和 TCP&#xff08;Transmission Control Protocol&#xff09;都是用于数据传输的协议&#xff0c;但它们在多个方面存在显著区别&#xff0c;以下为你详细介绍&#xff1a; 设计目标 RoCE&#xff1a;主要设计目标…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...