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 原文: 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的标签中有 默认标签和 自定义标签,两者的解析有着很大的不同,这次重点说默认标签的解析过程。 DefaultBeanDefinitionDocumentReader.class 默认标签的解析是在 DefaultBeanDefinitionDocumentReader.parseDefaultElement()函…...
Windows 图形显示驱动开发-IoMmu 模型
输入输出内存管理单元 (IOMMU) 是一个硬件组件,它将支持具有 DMA 功能的 I/O 总线连接到系统内存。 它将设备可见的虚拟地址映射到物理地址,使其在虚拟化中很有用。 在 WDDM 2.0 IoMmu 模型中,每个进程都有一个虚拟地址空间,即&a…...
简单易懂,解析Go语言中的Channel管道
Channel 管道 1 初始化 可用var声明nil管道;用make初始化管道; len(): 缓冲区中元素个数, cap(): 缓冲区大小 //变量声明 var a chan int //使用make初始化 b : make(chan int) //不带缓冲区 c : make(chan stri…...
STM32 USB 设备的描述信息作用
在使用 STM32 USB 功能时 usbd_desc.c 文件中定义了一段宏,以下解每段宏的用途。 #define USBD_VID 1155 #define USBD_LANGID_STRING 1033 #define USBD_MANUFACTURER_STRING "STMicroelectronics" #define US…...
Redis字符串常见命令(String)
字符串常见命令(String) Redis 中的字符串类型是一种非常基础且常用的数据类型,它不仅可以存储任何形式的字符串(包括文本数据),还可以对数字字符串进行自增、自减等操作。以下是对 Redis 字符串类型常见命…...
Educational Codeforces Round 174 (Rated for Div. 2)(ABCD)
A. Was there an Array? 翻译: 对于整数数组 ,我们将其相等特征定义为数组 ,其中,如果数组 a 的第 i 个元素等于其两个相邻元素,则 ;如果数组 a 的第 i 个元素不等于其至少一个相邻元素,则 …...
基于知识图谱的问答系统:后端Python+Flask,数据库Neo4j,前端Vue3(提供源码)
基于知识图谱的问答系统:后端PythonFlask,数据库Neo4j,前端Vue3 引言 随着人工智能技术的不断发展,知识图谱作为一种结构化的知识表示方式,逐渐成为问答系统的重要组成部分。本文将介绍如何构建一个基于知识图谱的问答…...
面试知识点2
文章目录 1. Linux 与 DockerLinux 基本指令VMware 安装 CentOSDocker 拉取镜像创建容器、部署 Spring Boot 项目 2. 关系型数据库 MySQL数据库语法多表关联查询数据库索引 3. 事务与死锁事务的隔离级别死锁的原因和避免方法 4. 排序算法与数据结构二分查找快速排序常见数据结构…...
Django项目之订单管理part1
一.前言 我们前面把django的常用知识点给讲完了,现在我们开始项目部分,项目是一个订单管理系统,我们同时也会在项目之中也会讲一些前面没有用到的知识点。 项目大概流程如下: 核心的功能模块: 认证模块,用…...
基于SSM+Vue的智能汽车租赁平台设计和实现(源码+文档+部署讲解)
技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...
deepseek本地调用
目录 1.介绍 2.开始调用 2.1模型检验 2.2 通过url调用 3.总结 1.介绍 这篇博客用来教你如何从本地调用ollama中deepseek的模型接口,直接和deepseek进行对话。 2.开始调用 2.1模型检验 首先要保证ollama已经安装到本地,并且已经下载了deepseek模型…...
文件同步工具哪家强?FreeFileSync 免费无限制
FreeFileSync 是一款备受推崇的开源文件同步与备份软件,凭借其卓越的功能和简洁直观的界面,赢得了全球用户的青睐。该软件不仅支持跨平台操作,兼容 Windows、macOS 和 Linux 系统,还能帮助用户在不同设备之间无缝同步文件…...
捷米特 JM - RTU - TCP 网关应用 F - net 协议转 Modbus TCP 实现电脑控制流量计
一、项目背景 在某工业生产园区的供水系统中,为了精确监测和控制各个生产环节的用水流量,需要对分布在不同区域的多个流量计进行集中管理。这些流量计原本采用 F - net 协议进行数据传输,但园区的监控系统基于 Modbus TCP 协议进行数据交互&…...
Coze扣子怎么使用更强大doubao1.5模型
最近,豆包刚刚发布了最新的doubao1.5系列模型,并且加量不加价。 在性能极大进步的情况下,价格还与之前一致。真是业界良心了。 在同样的价格下,肯定要使用性能更强大的模型嘛 于是我准备把所有的智能体和工作流切换到doubao1.5…...
layui 远程搜索下拉选择组件(多选)
模板使用(lay-module/searchSelect),依赖于 jquery、layui.dist 中的 dropdown 模块实现(所以data 格式请参照 layui文档) <link rel"stylesheet" href"layui-v2.5.6/dist/css/layui.css" /&g…...
嵌入式学习(18)---Linux文件编程中的进程
一、进程的概念 进程:(用来描述 程序动态执行的过程,方便操作系统管理的) 进行中的程序 程序的一次执行过程 (内存 CPU) 程序的实例 程序 ----加载到内存----> 进程 应用场景: 实现并发 同一时刻 同时发生 并行 …...
一.AI大模型开发-初识机器学习
机器学习基本概念 前言 本文主要介绍了深度学习基础,包括机器学习、深度学习的概念,机器学习的两种典型任务分类任务和回归任务,机器学习中的基础名词解释以及模型训练的基本流程等。 一.认识机器学习 1.人工智能和机器学习 人工智能&am…...
RoCE和 TCP的区别
RoCE(RDMA over Converged Ethernet)和 TCP(Transmission Control Protocol)都是用于数据传输的协议,但它们在多个方面存在显著区别,以下为你详细介绍: 设计目标 RoCE:主要设计目标…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
