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

news2025/4/16 11:38:16

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

<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-column
      prop="name"
      label="名称"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="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); // 添加当前节点的id
        if (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>

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

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

相关文章

使用VSCODE开发C语言程序

使用vscode配置C语言开发环境 一、安装VSCODE 1、下载vscode ​ 从官方网站&#xff08;https://code.visualstudio.com/Download&#xff09;上&#xff0c;下载windows版本的vscode 2、安装vscode ​ 下载完毕后&#xff0c;按照提示进行安装即可&#xff08;尽可能不要安…

【数据结构初阶第十二节】设计循环队列

云边有个稻草人-CSDN博客 必须有为成功付出代价的决心&#xff0c;然后想办法付出这个代价。 还有最后一道关于队列的习题&#xff0c;这题有点难&#xff0c;准备好迎接挑战吧&#xff01; 目录 1.【题目】 2.实现循环队列推荐用数组&#xff0c;Why? 3.Q1&#xff1a;如…

【数据分享】1929-2024年全球站点的逐年降雪深度数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2024年全球气象站…

【强化学习的数学原理】第10课-Actor-Critic方法-笔记

学习资料&#xff1a;bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接&#xff1a;强化学习的数学原理 西湖大学 赵世钰 文章目录 一、最简单的Actor-Critic&#xff08;QAC&#xff09;二、Advantage Actor-Critic&#xff08;A2C&#xff09;三、重要性采样和…

scratch猜年龄互动小游戏 2024年12月scratch四级真题 中国电子学会 图形化编程 scratch四级真题和答案解析

scratch猜年龄互动小游戏 2024年12月电子学会图形化编程Scratch等级考试四级真题 一、题目要求 老爷爷的年龄是1-100的随机数,老爷爷询问“请猜猜我的年龄是多少?”,输入年龄,老爷爷会回答"大了"或者"小了,直到最后成功猜出年龄。 1、准备工作 (1)删…

java每日精进 2.13 MySql迁移人大金仓

1.迁移数据库 1. 数据库创建语句 MySQL&#xff1a; CREATE DATABASE dbname; 人大金仓&#xff08;Kingbase&#xff09;&#xff1a; 在人大金仓中&#xff0c;CREATE DATABASE 的语法通常相同&#xff0c;但可能需要特别注意字符集的指定&#xff08;如果涉及到多语言支持…

2025最新智能优化算法:改进型雪雁算法(Improved Snow Geese Algorithm, ISGA)求解23个经典函数测试集,MATLAB

一、改进型雪雁算法 雪雁算法&#xff08;Snow Geese Algorithm&#xff0c;SGA&#xff09;是2024年提出的一种新型元启发式算法&#xff0c;其灵感来源于雪雁的迁徙行为&#xff0c;特别是它们在迁徙过程中形成的独特“人字形”和“直线”飞行模式。该算法通过模拟雪雁的飞行…

Open WebUI项目源码学习记录(从0开始基于纯CPU环境部署一个网页Chat服务)

感谢您点开这篇文章:D&#xff0c;鼠鼠我是一个代码小白&#xff0c;下文是学习开源项目Open WebUI过程中的一点笔记记录&#xff0c;希望能帮助到你&#xff5e; 本人菜鸟&#xff0c;持续成长&#xff0c;能力不足有疏漏的地方欢迎一起探讨指正&#xff0c;比心心&#xff5e…

什么是Grok-3?技术特点,场景,潜在问题与挑战

Grok-3 的技术特点与优势 1. 超大算力与训练规模 算力投入:Grok-3 使用了 20 万块英伟达 H100 GPU,分两个阶段训练(第一阶段 10 万 GPU 训练 144 天,第二阶段 20 万 GPU 训练 92 天),总计算量是前代 Grok-2 的 10 倍。这种规模远超同期其他项目(如印度的 1.8 万 GPU 公…

JWT 令牌

目录 一、JWT 1、什么是JWT 2、JWT的组成 3、JJWT签发与验证token 1、创建token 2、解析token 3、设置过期时间 4、自定义claims 前言&#xff1a; 在现代Web应用和微服务架构中&#xff0c;用户身份验证和信息安全传输是核心问题。JSON Web Token&#xff08;J…

鼎捷PLM深度集成DeepSeek,领跑智能研发新赛道

新年伊始&#xff0c;DeepSeek以其卓越的性能、高性价比和开源优势&#xff0c;掀起一股AI技术应用热潮&#xff0c;重塑各行各业的知识管理、知识应用模式。对制造业来说&#xff0c;首当其冲的就是研发管理变革&#xff0c;这也引发了企业的深度思考&#xff1a;在工业领域的…

VMware新建虚拟机

看看自己的电脑是什么内核&#xff0c;有几个处理器 再分配给虚拟机 镜像文件需要自己安装下载地方https://mirrors.aliyun.com/centos/?spma2c6h.13651104.d-2001.8.3fb1320cuI1jeS 然后就出现了 然后开启虚拟机&#xff0c;等待 等待之后如下&#xff0c;选择语言 等待一段时…

使用iOS个人声音与SoVITS训练个人AI语音(10分钟快速上手)

使用iOS个人声音与SoVITS训练个人AI语音&#xff08;10分钟快速上手&#xff09; 序言&#xff1a;最近在抖音上频繁看到曼波唱歌的视频和各种AI语音的搞笑短片&#xff0c;加上年后新购置的M2硬盘终于提供了足够的存储空间&#xff0c;让我有机会深入研究AI语音训练。24年年初…

【JavaEE进阶】Spring MVC(3)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗 如有错误&#xff0c;欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…

火语言RPA--Excel读取内容

【组件功能】&#xff1a;读取Excel内指定位置的内容或读取整篇Sheet页内容 配置预览 配置说明 读取位置 单元格&#xff1a;读取指定单元格中的内容。 行&#xff1a;读取指定行内容。 列&#xff1a;读取指定列内容。 区域&#xff1a;读取指定区域内容。 整篇sheet页&…

sass报错:[sass] Undefined variable. @import升级@use语法注意事项

今天创建vue3项目&#xff0c;迁移老项目代码&#xff0c;使用sass的时候发现import语法已经废弃&#xff0c;官方推荐使用use替换。 这里我踩了一个坑找半天的问题&#xff0c;原因是sass升级到1.85之后 定义变量前加上 - 就是表示变量私有&#xff0c;即使使用use导出 在新的…

重新出发的LLM本地部署——DeepSeek加持下的Ollama+OpenWebUI快速部署

DeepSeek 这真的是太惊艳了&#xff0c;发布出来的模型这么能打&#xff0c;在线的版本使用起来也是丝滑连招&#xff0c;感觉效果比起之前一直用智谱 chatglm4 更好用&#xff0c;想着本地化部署一下。 本来以为&#xff0c;会和之前在开发测试 transformers 的模型和代码一样…

动态网格图片展示中的自适应逻辑

在现代网页设计中&#xff0c;自适应逻辑不仅提升了用户体验&#xff0c;也显著提高了组件的灵活性。本文将探讨如何通过 动态计算每页图片数 和 窗口尺寸变化监听 来实现网格图片的自适应展示。以下内容不仅包含逻辑的核心&#xff0c;还展示了如何优雅地将这些逻辑与 Vue 框架…

Java基础——代理模式

代理模式是一种比较好理解的设计模式。简单来说就是 我们使用代理对象来代替对真实对象(real object)的访问&#xff0c;这样就可以在不修改原目标对象的前提下&#xff0c;提供额外的功能操作&#xff0c;扩展目标对象的功能。 一、代理模式的主要作用 控制访问&#xff1a;通…

Django项目之订单管理part1

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