当前位置: 首页 > news >正文

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>

相关文章:

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

默认第一项展开: 展开所有项&#xff1a; 折叠所有项&#xff1a; <template><el-treestyle"max-width: 600px":data"treeData"node-key"id":default-expanded-keys"defaultExpandedKey":props"defaultProps"…...

ProFormList --复杂数据联动ProFormDependency

需求&#xff1a; &#xff08;1&#xff09;数据联动&#xff1a;测试数据1、2互相依赖&#xff0c;测试数据1<测试数据2,测试数据2>测试数据1。 &#xff08;2&#xff09;点击添加按钮&#xff0c;添加一行。 &#xff08;3&#xff09;自定义操作按钮。 &#xff0…...

Git、Github、tortoiseGit下载安装调试全套教程

一、Git 1.下载安装Git 编辑器可默认Vim&#xff0c;可换成别的&#xff0c;此处换成VScode&#xff0c;换成VScode或别的都需要单独下载和调用 &#xff08;1&#xff09;Git安装&#xff1a;https://www.cnblogs.com/xiuxingzhe/p/9300905.html 超级完整的 Git的下载、安…...

老师怎么快速发布成绩?

期末考试的钟声刚刚敲响&#xff0c;成绩单的发放却成了老师们的一大难题。每当期末成绩揭晓&#xff0c;老师们便要开始一项繁琐的任务——将每一份成绩单逐一私信给家长。这不仅耗费了大量的时间和精力&#xff0c;也让本就忙碌的期末工作变得更加繁重。然而&#xff0c;随着…...

央视揭露:上百元的AI填报高考志愿真的靠谱吗?阿里云新增两位AI圈“代言人”!|AI日报

文章推荐 MiniMax闫俊杰&#xff1a;国内模型远不及GPT-4&#xff1b;OpenAI隐瞒黑客曾入侵其内部系统&#xff5c;AI日报 今日热点 月之暗面、智联招聘成为阿里云新“代言人”&#xff0c;使用阿里云强大算力和大模型服务平台提升模型推理效率 7月8日&#xff0c;阿里云官…...

TPM管理咨询公司甄选指南

在竞争激烈的市场环境中&#xff0c;TPM&#xff08;全面生产维护&#xff09;管理咨询公司的重要性日益凸显。然而&#xff0c;如何在众多咨询公司中筛选出最适合自己企业的合作伙伴&#xff0c;成为了许多企业决策者面临的难题。本文将从专业度、行业经验、服务质量和性价比等…...

探索 Scikit-Learn:机器学习的强大工具库

Scikit-Learn 探索 Scikit-Learn&#xff1a;机器学习的强大工具库主要功能模块分类&#xff08;Classification&#xff09;回归&#xff08;Regression&#xff09;聚类&#xff08;Clustering&#xff09;降维&#xff08;Dimensionality Reduction&#xff09;模型选择&…...

音视频质量评判标准

一、实时通信延时指标 通过图中表格可以看到&#xff0c;如果端到端延迟在200ms以内&#xff0c;说明整个通话是优质的&#xff0c;通话效果就像大家在同一个房间里聊天一样&#xff1b;300ms以内&#xff0c;大多数人很满意&#xff0c;400ms以内&#xff0c;有小部分人可以感…...

如何在vue3中使用scss

一 要使用scss首先需要下载相关的包 可以在终端使用下面的命令下载相关包 npm install -D sass 二 在src文件下新建一个文件夹叫做styles 在文件夹下创建三个文件 index.scss主要用来引用其他文件 reset.scss用来清除默认的样式 variable.scss用来配置全局属性 三 需要在v…...

Gartner发布采用美国防部模型实施零信任的方法指南:七大支柱落地方法

零信任是网络安全计划的关键要素&#xff0c;但制定策略可能会很困难。安全和风险管理领导者应使用美国国防部模型的七大支柱以及 Gartner 研究来设计零信任策略。 战略规划假设 到 2026 年&#xff0c;10% 的大型企业将拥有全面、成熟且可衡量的零信任计划&#xff0c;而 202…...

Flutter——最详细(Badge)使用教程

背景 主要常用于组件叠加上圆点提示&#xff1b; 使用场景&#xff0c;消息数量提示&#xff0c;消息红点提示 属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件 代码块 class Badge…...

SQLServer的系统数据库用别的服务器上的系统数据库替换后做跨服务器连接时出现凭证、非对称金钥或私密金钥的资料无效

出错作业背景&#xff1a; 公司的某个sqlserver服务器要做迁移&#xff0c;由于该sqlserver服务器上数据库很多&#xff0c;并且做了很多的job和维护计划&#xff0c;重新安装的sqlserver这些都是空的&#xff0c;于是就想到了把系统4个系统数据库进行替换&#xff0c;然后也把…...

vue前端面试

一 .v-if和v-show的区别 v-if 和 v-show 是 Vue.js 中两个常用的条件渲染指令&#xff0c;它们都可以根据条件决定是否渲染某个元素。但是它们之间存在一些区别。 语法&#xff1a;v-if 和 v-show 的语法相同&#xff0c;都接收一个布尔值作为参数。 <div v-if"show…...

【网络安全】Host碰撞漏洞原理+工具+脚本

文章目录 漏洞原理虚拟主机配置Host头部字段Host碰撞漏洞漏洞场景工具漏洞原理 Host 碰撞漏洞,也称为主机名冲突漏洞,是一种网络攻击手段。常见危害有:绕过访问控制,通过公网访问一些未经授权的资源等。 虚拟主机配置 在Web服务器(如Nginx或Apache)上,多个网站可以共…...

unattended-upgrade进程介绍

unattended-upgrade 是一个用于自动更新 Debian 和 Ubuntu 系统的软件包。这个进程通常用于定期下载并安装安全更新&#xff0c;以保持系统的安全性和稳定性。 具体来说&#xff0c;这个命令 /usr/bin/python3 /usr/bin/unattended-upgrade --download-only 表示运行 unattend…...

SpringBoot 中多例模式的神秘世界:用法区别以及应用场景,最后的灵魂拷问会吗?- 第519篇

历史文章&#xff08;文章累计500&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 《…...

基于STM32设计的智能婴儿床(ESP8266局域网)_2024升级版_180

基于STM32设计的智能婴儿床(采用STM32F103C8T6)(180) 文章目录 一、设计需求【1】项目功能介绍【2】程序最终的运行逻辑【3】硬件模块组成【4】ESP8266模块配置【5】上位机开发思路【6】系统功能模块划分1.2 项目开发背景1.3 开发工具的选择1.4 系统框架图1.5 系统原理图1.6 硬…...

C++(第四天----拷贝函数、类的组合、类的继承)

一、拷贝构造函数&#xff08;复制构造函数&#xff09; 1、概念 拷贝构造函数&#xff0c;它只有一个参数&#xff0c;参数类型是本类的引用。如果类的设计者不写拷贝构造函数&#xff0c;编译器就会自动生成拷贝构造函数。大多数情况下&#xff0c;其作用是实现从源对象到目…...

第一课:接口配置IP地址:DHCP模式

希望pc1,pc2,pc3自动分配到ip地址。 实验拓扑: 配置&#xff1a;高级一点的路由器还是手动配置&#xff1a; [R1]int g0/0/0 [R1-g0/0/0]ip address 192.168.1.1 255.255.255.0 打开PC1&#xff0c;切换到DHCP模式&#xff0c;点击应用&#xff0c;再到命令行输入ipconfig&…...

esp32_spfiffs

生成 spiffs image python spiffsgen.py <image_size> <base_dir> <output_file> eg, python spiffsgen.py 0x2000 ./folder hello.bin Arduino 的库有例子可以直接用于 OTA 升级 spiffs 分区 HTTPUpdateResult HTTPUpdate::updateSpiffs(HTTPClient &h…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...