el-table树型数据lazy加载实现首行展开

el-table树型数据lazy加载实现首行展开

遇到一个小需求,一个树型数据的el-table,并且使用lazy加载,需要实现首行展开。

实现

思路:使用 expand-row-keys 或者 toggleRowExpansion API展开,但是发现这些API并不会触发 load 函数。
解:开始自动获取第一行数据的子数据,并设置进第一行数据的 children 里,再使用 toggleRowExpansion API展开第一行。

新问题:点击折叠会再次触发 load 函数
解:展开过一次的行,后面再折叠与展开不会再触发 load,说明触发 load 是有触发机制的,借助了一下混元,找到了这个控制变量 tableRef.value.store.states.treeData.value[].loaded,尝试改了它 loaded: true

tableRef.value.store.states.lazyTreeNodeMap.value[firstRow.yourRowKey] = children;
tableRef.value.store.states.treeData.value[firstRow.yourRowKey] = {children,display: true,expanded: true,lazy: true,level: 0,loaded: true,loading: false,};

然后,工作了,默认首行展开,折叠/展开切换正常。

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

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

相关文章

【百度智能体】5分钟打造一款为你写情书的智能体

目录 前言一、智能体特点二、应用场景三、打造一款写情书智能体1、名称2、简介3、填写人物设定:4、开场白5、引导示例6、预览 最后 前言 智能体作为人工智能领域的一个重要概念,是指能够自主感知环境、做出决策并执行行动的系统。它具备自主性、交互性、…

程序员经常去的网站

程序员们经常去的网站确实非常多样化,这些网站不仅提供了丰富的技术资源和学习材料,还是他们交流经验和分享知识的重要平台。以下是一些程序员经常访问的网站,我将按照不同的类别进行归纳和分点表示: 一、代码托管与协作 GitHub&a…

单元测试(了解)

单元测试定义 针对最小功能单元(方法),编写测试代码对其进行正确性测试 之前如何进行单元测试?有什么问题? main中编写测试代码,调用方法测试 问题: 无法自动化测试 每个方法的测试可能不是…

EPSON爱普生RTC RA8900CE/RA8000CE+松下Panasonic电池组合

RTC是一种实时时钟,用于记录和跟踪时间,具有独立供电和时钟功能。在某些应用场景中,为了保证RTC在断电或者其他异常情况下依然能够正常工作,需要备份电池方案来提供稳定的供电。本文将介绍EPSON爱普生RTC RA8900CE/RA8000CE松下Pa…

【吊打面试官系列】Java高并发篇 - AQS 支持几种同步方式 ?

大家好,我是锋哥。今天分享关于 【AQS 支持几种同步方式 ?】面试题,希望对大家有帮助; AQS 支持几种同步方式 ? 1、独占式 2、共享式 这样方便使用者实现不同类型的同步组件,独占式如 ReentrantLock&…

VUE3.0学习-模版语法

安装Node.js的过程相对直接,以下是详细的步骤指导,适用于大多数操作系统: ### 1. 访问Node.js官方网站 首先,打开浏览器,访问 [Node.js 官方网站](https://nodejs.org/)。 ### 2. 选择合适的版本下载 在Node.js官网上…

OpenHarmony 实战开发——ArkUI中的线程和看门狗机制

一、前言 本文主要分析ArkUI中涉及的线程和看门狗机制。 二、ArkUI中的线程 应用Ability首次创建界面的流程大致如下: 说明: • AceContainer是一个容器类,由前端、任务执行器、资源管理器、渲染管线、视图等聚合而成,提供了生…

C++ 头文件优化

C 是一种灵活的语言,所以需要一种积极的方法来分析和减少编译时依赖。一种常见的达到这个目的的方法是,将依赖从头文件里转移到源代码文件里。实现这个目的的方法叫做提前声明。 简而言之,这些声明告诉编译器某个函数接受和返回哪些参数&…

opencv 关于 卷积核(掩膜) 的通俗理解

1 opencv 坐标原点是左上角 x向右延伸 y向下延伸 图像的坐标原点位于左上角,x 轴向右延伸,y 轴向下延伸。这种坐标系与大多数计算机图像处理库(如 PIL、MATLAB 等)一致 例如 给定像素坐标(x,y) 则周围点表示为: 左上方的像素:…

Android 调用OpenCV动态库

1、下载OpenCVMobile的文件,链接地址 2、OpenCV-android-sdk/sdk/native/libs/arm64-v8a/libopencv_java4.so拷贝处理放到libs里面 3、 OpenCV-android-sdk/sdk/native/jni/include 放到include文件夹下 4、Cmake修改 set(lib_DIR ${CMAKE_SOURCE_DIR}/libs) add_library(l…

Python操作MySQL实战

文章导读 本文用于巩固Pymysql操作MySQL与MySQL操作的知识点,实现一个简易的音乐播放器,拟实现的功能包括:用户登录,窗口显示,加载本地音乐,加入和删除播放列表,播放音乐。 点击此处获取参考源…

《异常检测——从经典算法到深度学习》28 UNRAVEL ANOMALIES:基于周期与趋势分解的时间序列异常检测端到端方法

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …

【必会面试题】Redis 中的 zset数据结构

目录 Redis 中的 zset(sorted set,有序集合)数据结构在底层可以使用两种不同的实现:压缩列表(ziplist) 和 跳跃表(skiplist)。具体使用哪种结构取决于存储元素的数量和大小&#xff…

设计模式13——桥接模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用,主要是下面的UML图可以起到大作用,在你学习过一遍以后可能会遗忘,忘记了不要紧,只要看一眼UML图就能想起来了。同时也请大家多多指教。 桥接模式(Bridge&a…

冯喜运:5.27黄金短线看震荡,今日黄金原油走势分析

【黄金消息面分析】:黄金作为传统的避险资产,在经济不确定性中扮演着至关重要的角色。近期,国际黄金价格经历了显著的波动。从5月9日的低点2325.19美元/盎司反弹至2340美元/盎司以上,尽管金价曾一度触及2449.89美元/盎司的历史高点…

利用ESP32(Arduino IDE)向匿名上位机发送欧拉角

文章目录 一. 匿名上位机介绍二. 匿名协议说明1. 匿名协议官方说明文档2. 协议说明 三. 向匿名上位机发送数据(基于Arduino IDE的esp32)四. 运行效果 一. 匿名上位机介绍 匿名上位机官方介绍视频 匿名上位机官方下载 二. 匿名协议说明 1. 匿名协议官方说明文档 官方对于协…

现代 c++ 三:移动语义与右值引用

移动语义很简单,但它相关联的术语很复杂。本文尝试从历史的角度解释清楚这些乱七八糟的术语及其关联: 表达式 (expression)、类型(type)、值类别 (value categories); 左值 (lvalue)、右值 (rvalue)、广义左值 (glval…

【Webpack】样式处理 - 样式预处理

样式预处理是在开发中会使用一些样式预编译语言,如scss,less等,在项目打包过程中再将这些语言转换为css,借助这些语言强大和便捷的特性,可以降低项目的开发和维护成本。 下面是目前最主流的两种预编译语言是如何配置的 sass和scs…

Flink 数据源

原理 在 Flink 中,数据源(Source)是其中一个核心组件,负责从各种来源读取数据供 Flink 程序处理。 Flink 的数据源类型丰富,涵盖了从简单测试到生产环境使用的各种场景。Kafka、Socket、文件和集合是 Flink 中最常见…

5.2 Go 参数传递

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…