vue3+ el-tree 展开和折叠,默认展开第一项

默认第一项展开:
在这里插入图片描述
展开所有项:
展开

折叠所有项:
折叠

<template><el-treestyle="max-width: 600px":data="treeData"node-key="id":default-expanded-keys="defaultExpandedKey":props="defaultProps"ref="treeRef"/><el-button @click="expandAll" type="primary" plain>展开所有</el-button><el-button @click="collapseAll" type="success" plain>折叠所有</el-button>
</template><script setup>
import { ref } from 'vue'
const defaultProps = {children: 'children',label: 'label',
}
const treeData = ref([])
const treeRef = ref(null)
const defaultExpandedKey= ref([])const expandAll = () => {treeRef.value.store._getAllNodes().forEach(node => {node.expanded = true;});
}const collapseAll = () => {treeRef.value.store._getAllNodes().forEach(node => {node.expanded = false;});
}
// 此处使用定时器渲染数据,实际情况发送请求获取数据之后再设置
setTimeout(()=>{defaultExpandedKey.value = ['1','4']treeData.value = data
},1000)const getTreeData = async () => {const { data } = await getTreeList();treeData.value = data;defaultExpandedKey.value = data[0].map((item) => item.id);
};const data = [{id: 1,label: 'Level one 1',children: [{id: 4,label: 'Level two 1-1',children: [{id: 9,label: 'Level three 1-1-1',},{id: 10,label: 'Level three 1-1-2',},],},],},{id: 2,label: 'Level one 2',children: [{id: 5,label: 'Level two 2-1',},{id: 6,label: 'Level two 2-2',},],},{id: 3,label: 'Level one 3',children: [{id: 7,label: 'Level two 3-1',},{id: 8,label: 'Level two 3-2',},],},
]
</script>

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

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

相关文章

超好用的傲软录屏下载和解锁版安装教程 (专业好用的桌面录屏软件)

录屏系列软件安装目录 一、ZD屏幕录像机解锁版下载及安装教程 (一款小巧的轻量级屏幕录像工具) 二、班迪录屏Bandicam v7解锁版安装教程&#xff08;高清录屏软件&#xff09; 三、Mirillis Action v4 解锁版安装教程(专业高清屏幕录像软件) 四、Aiseesoft Screen Recorder…

支持图片识别语音输入的LobeChat保姆级本地部署流程

文章目录 前言1. LobeChat对我们有哪些帮助?2. 本地安装LobeChat3. 如何使用LobeChat工具4. 安装Cpolar内网穿透5. 实现公网访问LobeChat6. 固定LobeChat公网地址 前言 本文主要介绍如何在Windows系统电脑本地部署LobeChat&#xff0c;一款高颜值的开源AI大模型智能应用&…

Java学习十四—Java8特性之Lambda表达式

一、简介 Java 8 引入了 Lambda 表达式&#xff0c;它是一种更简洁、更便于使用的函数式编程特性。Lambda 表达式允许将函数作为方法的参数&#xff08;函数式接口的实例&#xff09;传递给某个方法&#xff0c;或者将代码像数据一样进行传递。 ‍ lambda是一个匿名函数&#…

LLM之RAG实战(四十一)| 使用LLamaIndex和Gemini构建高级搜索引擎

Retriever 是 RAG&#xff08;Retrieval Augmented Generation&#xff09;管道中最重要的部分。在本文中&#xff0c;我们将使用 LlamaIndex 实现一个结合关键字和向量搜索检索器的自定义检索器&#xff0c;并且使用 Gemini大模型来进行多个文档聊天。 通过本文&#xff0c;我…

明确产业定位,用科学规划铸就高品质文化产业园

科学规划是构建高品质文化产业园区的重要保障。通过明确产业定位与发展目标、科学规划空间布局、完善基础设施与配套设施、注重生态环境保护、加强人才引进与培养以及推动产业协同发展等措施的实施&#xff0c;可以推动文化产业园区向高品质、高效益、可持续的方向发展。 一、明…

【TB作品】51单片机 Proteus仿真 超声波读取+LCD1602显示仿真12MHZ

实验报告&#xff1a;51单片机 Proteus仿真 超声波读取LCD1602显示仿真 一、实验背景 本实验旨在使用51单片机&#xff08;AT89C51&#xff09;结合超声波传感器HC-SR04和LCD1602液晶显示屏&#xff0c;通过Proteus仿真平台实现超声波测距功能&#xff0c;并将测得的距离显示…

leetcode hot100

哈希 49.字母异位词分组 HashMap的含义比较晕&#xff0c;可以重做 双指针 11.盛最多水的容器 双指针的起始位置和移动条件没转过来&#xff0c;可以重做 15.三数之和 不太熟练&#xff0c;可以再做一遍 42.接雨水 还可以用dp和单调栈做 双指针法&#xff1a; 首先需要注意…

【DFS(深度优先搜索)详解】看这一篇就够啦

【DFS详解】看这一篇就够啦 &#x1f343;1. 算法思想&#x1f343;2. 三种枚举方式&#x1f343;2.1 指数型枚举&#x1f343;2.2 排列型枚举&#x1f343;2.3 组合型枚举 &#x1f343;3. 剪枝优化&#x1f343;4. 图的搜索&#x1f343;5. 来几道题试试手&#x1f343;5.1 选…

spark任务,使用 repartition 对数据进行了重新分区,但任务输入数据大小仍存在不均衡

目录 目录 确认 Spark 任务重新分区后的数据不均衡 1. 检查分区大小 2. 使用 DataFrame API 检查分区 3. 使用 Spark UI 查看分区情况 4. 使用日志记录分区信息 可能原因 1. 数据分布不均衡 2. 分区策略 3. 数据预处理 解决方案 1. 检查数据分布 2. 使用 coalesce…

代码随想录算法训练营Day62|冗余连接、冗余连接II

冗余连接 108. 冗余连接 (kamacoder.com) 考虑使用并查集&#xff0c;逐次将s、t加入并查集中&#xff0c;当发现并查集中find(u)和find(v)相同时&#xff0c;输出u和v&#xff0c;表示删除的边即可。 #include <iostream> #include <vector> using namespace s…

【分布式系统】注册中心Zookeeper

目录 一.Zookkeeper 概述 1.Zookkeeper 定义 2.Zookkeeper 工作机制 3.Zookkeeper 特点 4.Zookkeeper 数据结构 5.Zookkeeper 应用场景 统一命名服务 统一配置管理 统一集群管理 服务器动态上下线 软负载均衡 6.Zookkeeper 选举机制 第一次启动选举机制 非第一次…

uboot镜像之boot烧写

适用场景:单板上没有boot&#xff0c;和按地址烧写配合&#xff0c;可完成单板所有镜像的烧写。 原理:bootrom读取u-boot.bin至内存并执行此u-boot 然后运行uboot,通过uboot sf命令烧录uboot.bin到flash存储空间去. bootrom读取u-boot.bin至内存并执行此u-boot 通过uboot sf命…

【开发工具】webStrom2024版-插件

Chinese (Simplified) Language Pack / 中文语言包 英文界面变为中文界面。 Material Theme UI 界面美化 Rainbow Brackets 代码量变大时&#xff0c;总会伴随着各种括号&#xff1b;它能将括号赋予不同的颜色&#xff0c;方便我们区分。 Translation 中英互译&#xff0c;…

Codeforces Round 918 (Div. 4)(A~F)

目录 A. Odd One Out B. Not Quite Latin Square C. Can I Square? D. Unnatural Language Processing E. Romantic Glasses F. Greetings A. Odd One Out Problem - A - Codeforces 输出一个不同于其他两个数的数&#xff0c;用异或操作可以轻松解决。 void solve{int…

高考志愿填报,选专业是看兴趣还是看就业?

对于结束高考的学生来说&#xff0c;选择专业的确是一个非常让人头疼的事情。因为很多人都不知道&#xff0c;选专业的时候究竟是应该看一下个人兴趣&#xff0c;还是看未来的就业方向&#xff0c;这也是让不少人都相当纠结的问题。这里分析一下关于专业选择的问题&#xff0c;…

windows下docker安装

目录 前言 1.搭建WSL2环境 1.1打开控制面板 1.2 将WSL 2设置为默认值 2.安装docker 3.使用docker 结论&#xff1a; 前言 本文安装docker&#xff0c;将使用WSL2&#xff0c;而不是vmeare和Hyper-V&#xff0c;也不需要你另外安装Linux系统&#xff08;如Ubuntu&#x…

PostgreSQL主从同步

目录 一、主从复制原理 二、配置主数据库 2.1 创建同步账号 2.2 配置同步账号访问控制 2.3 设置同步参数 3.4 重启主数据库 三、配置从数据库 3.1 停止从库 3.2 清空从库数据文件 3.3 拉取主库数据文件 3.4 配置从库同步参数 3.5 启动从库 四、测试主从 4.1在主库…

【HTML入门】第四课 - 换行、分割横线和html的注释

这一小节&#xff0c;我们继续说HTML的入门知识&#xff0c;包括换行、横线分割以及注释&#xff08;html的注释&#xff09;。 目录 1 换行 2 分割横线 3 html注释 1 换行 html中分为块元素和行内元素。这一小节呢&#xff0c;先不说这些元素们&#xff0c;我们先说一下换…

免费分享:1981-2016全球粮食产量数据集(附下载方法)

了解主要作物的历史产量模式&#xff0c;包括趋势和年际变化&#xff0c;对于了解在粮食需求和气候变化日益增长的情况下粮食生产的现状、潜力和风险至关重要。 数据简介 1981-2016全球粮食产量数据集是农业普查统计&#xff08;粮农组织报告的国家产量统计数据&#xff09;和…