当前位置: 首页 > 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…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...