element-ui tree树形结构全选、取消全选,展开收起

控制树形结构全选、取消全选,展开收起
在这里插入图片描述

<template><div><!-- 添加 ref="tree" 属性--><el-tree:data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"></el-tree><div class="buttons"><el-button @click="allExpanded">折叠/展开</el-button><el-button @click="allChecked">全选</el-button><el-button @click="resetChecked">清空</el-button></div></div>
</template><script>export default {methods: {// this.$refs.tree  tree是上面控件 el-tree 的 ref 属性的值allExpanded(){// 展开还是收起this.expanded = !this.expanded;var treeNodeList = this.$refs.tree.store._getAllNodes();for (var i = 0; i < treeNodeList.length; i++) {treeNodeList[i].expanded = this.expanded;}},allChecked() {// 将根节点赋值上去this.$refs.tree.setCheckedKeys([1,2,3]);},resetChecked() {// 将选中设置为空this.$refs.tree.setCheckedKeys([]);}},data() {return {expanded:true,data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

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

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

相关文章

详解SpringCloud微服务技术栈:Feign远程调用、最佳实践、错误排查

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;Nacos配置管理 &#x1f4da;订阅专栏&#xff1a;微服务技术全家桶 希望文章对你们有…

蓝桥杯青少年创意编程大赛:激发少儿编程潜能,培养未来科技之星

随着科技的飞速发展&#xff0c;编程已经成为了当今世界的一项重要技能。为了培养更多的编程人才&#xff0c;蓝桥杯官网显示&#xff0c;蓝桥杯青少年创意编程大赛应运而生。作为国内有影响力的少儿编程赛事之一&#xff0c;蓝桥杯青少年创意编程大赛旨在激发青少年对编程的兴…

​Portkey AI网关:一个用来连接多种人工智能模型的开源工具

简介 它允许开发者通过一个简单的API接口来访问超过100种不同的大语言模型。包括OpenAI、Anthropic、Mistral、LLama2、Anyscale、Google Gemini等。安装体积只有45kb&#xff0c;处理速度提升了9.9倍&#xff0c;可以在多个不同的AI模型中来回切换。可以根据自己的需要进行灵…

找不到mfc100.dll的解决方法,怎么修复mfc100.dll文件

当我们在使用电脑时&#xff0c;时常可能会遇到各类系统提示的错误信息。"找不到mfc100.dll" 就是这些错误之一&#xff0c;该错误提示会妨碍我们执行一些应用程序或特定代码。为了帮助读者克服这个技术障碍&#xff0c;本篇文章将详尽阐明导致该问题的根本原因&…

【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

这是【Flutter 问题系列第 80 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.10.5、Dart SDK&#xff1a;3.0.5 一&#xff1a;问题描述 在输入用户名称、简介等内容时&#xff0c;一般我们都会限制输入框内最大可输入…

FFMPEG解码实时流,支持cpu、gpu解码

官网下载的ffmpeg目前只能下载到X64版本的库&#xff0c;具体编译请参考windows编译ffmpeg源码&#xff08;32位库&#xff09;_windows 32位ffmpeg动态库-CSDN博客 直接上代码 int VideoDecodeModule::Open(std::string strUrl) {AVFormatContext *pFormatCtx nullptr;AVCo…

电脑本地连接不见了怎么恢复?5个方法轻松解决问题!

“我在使用电脑时&#xff0c;突然发现我的本地连接不见了&#xff0c;这是怎么回事呢&#xff1f;有什么方法可以解决这个问题吗&#xff1f;” 电脑的本地连接是一种将电脑与局域网连接的方式。局域网是一种小型的网络&#xff0c;通常在建筑物内或地理位置相近的少量计算机之…

Python数据分析案例33——新闻文本主题多分类(Transformer, 组合模型) 模型保存

案例背景 对于海量的新闻&#xff0c;我们可能需要进行文本的分类。模型构建很重要&#xff0c;现在对于自然语言处理基本都是神经网络的方法了。 本次这里正好有一组质量特别高的新闻数据&#xff0c;涉及 教育 科技 社会 时政 财经 房产 家居 七大主题&#xff0c;基本涵盖…

Grafana(三)Grafana 免密登录-隐藏导航栏-主题变换

一. 免密登录 Grafana 的常用方式&#xff1a; 将配置好的Grafana图嵌入到系统页面中 为了实现可免登录访问&#xff0c;可以通过如下方式进行设置&#xff1a; 1. 修改Grafana配置文件 在Grafana的配置文件 /etc/grafana/grafana.ini 中&#xff0c;找到 [auth.anonymous] 配…

P9842 [ICPC2021 Nanjing R] Klee in Solitary Confinement 题解(SPJ!!!)

[ICPC2021 Nanjing R] Klee in Solitary Confinement 题面翻译 给定 n , k n,k n,k 和一个长为 n n n 的序列&#xff0c;你可以选择对区间 [ l , r ] [l, r] [l,r] 的数整体加上 k k k&#xff0c;也可以不加。最大化众数出现次数并输出。 题目描述 Since the travele…

MySQL命令大全和实例

文章目录 1. 数据库管理2. 表操作3. 数据操作&#xff08;CRUD&#xff09;4. 条件查询与排序5. 聚合函数和分组6. 用户权限管理7. 其他操作8. 视图操作9. 索引操作10. 子查询与连接查询11. 插入多行数据12. 删除满足特定条件的表中所有数据13. 清空表&#xff08;保留表结构&a…

rust跟我学五:是否安装双系统

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎么得到检测双系统的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:[我的Ru…

IOS-高德地图路径绘制显示交通状况-Swift

本文基于&#xff1a;高德地图路径绘制进行了路径绘制的优化&#xff0c;添加了根据交通信息&#xff08;是否拥堵&#xff09;来显示路况&#xff0c;效果如图&#xff1a; 图标资源&#xff1a; custtexture_bad custtexture_green custtexture_slow custtexture_serio…

关于C语言整型提升的讲解

目录 1.什么是整型提升 2.整型提升的意义 3.整型提升是怎么提升的 4.整型提升的实例 1.什么是整型提升 C语言中的整型算术运算总是以缺省&#xff08;默认&#xff09;整型类型的精度来进行的。为了获得这个精度&#xff0c;表达式中的字符和短整型操作数在使用之前会被转换…

web练习2

需求 1.计算用户指定的数值内的奇数和。例如用户输入的是10则计算13579的和 <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>作业1</title></head> <body> <script>//计算用…

使用 Python 创造你自己的计算机游戏(游戏编程快速上手)第四版:第十五章到第十八章

十五、反转棋游戏 原文&#xff1a;inventwithpython.com/invent4thed/chapter15.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 在本章中&#xff0c;我们将制作反转棋&#xff0c;也称为黑白棋或奥赛罗。这个双人棋盘游戏是在网格上进行的&#xff0c;因此我们…

2024“华数杯”(A题)放射性 Tritium 污染问题国际大学生数学建模竞赛| 建模秘籍文章代码思路大全

铛铛&#xff01;小秘籍来咯&#xff01; 小秘籍希望大家都能轻松建模呀&#xff0c;华数杯也会持续给大家放送思路滴~ 抓紧小秘籍&#xff0c;我们出发吧~ 完整内容可以在文章末尾领取&#xff01; 问题重述&#xff1a; 2024 “Huashu Cup” 国际数学建模大赛 - Proble…

机器学习平台建设(一)

一、概述 下图是较简化的机器学习平台架构&#xff0c;概括了机器学习平台的主要功能和流程。本章会进行简要介绍&#xff0c;在功能章节再展开详述。机器学习最主要的三个步骤可概括为&#xff1a;数据处理、建模以及部署。 数据处理&#xff0c;即所有和数据相关的工作&…

一种基于YOLO改进的高效且轻量级的表面缺陷检测网络, NEU-DET和GC10-DET涨点明显

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;一种基于YOLO改进的高效且轻量级的表面缺陷检测&#xff0c; 在NEU-DET和GC10-DET任务中涨点明显 目录 1.轻量且高效的YOLO 1.1 SCRB介绍 1.1.1 ScConv介绍 1.2 GSConvns 1.3 od_mobilenetv2_050 1.4 对应ya…

linux多进程基础(6):setitimer(间隔定时器)和signal(信号处理函数)

1.setitimer函数 setitimer函数用于设置一个间隔定时器,它会在指定的时间间隔到达时向进程发送一个信号。其定义如下: #include <sys/time.h> int setitimer(int which, const struct itimerval *new_value, struct itimerval *old_value); 该函数一共有三个参数,其…