elementUI树节点全选,反选,半选状态

// <template>部分
<div class="check-block"><el-divider></el-divider><el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><el-divider></el-divider><el-tree :data="templateList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @check="changeCheck"></el-tree></div>data(){return {indeterminate: false,checkAll: false,templateList: [],treeData: [],}
},
methods:{
handleCheckAllChange() {if (this.checkAll) {for (let i = 0; i < this.templateList.length; i++) {if (this.$refs.tree.getNode(this.templateList[i]).disabled == false) {this.$refs.tree.setChecked(this.templateList[i].id, true, true);}}this.treeData = this.$refs.tree.getCheckedNodes(false, true).map((i) => i.id);this.indeterminate = false;} else {this.$refs.tree.setCheckedNodes([]);this.treeData = [];this.indeterminate = false;}},changeCheck() {this.treeData = this.$refs.tree.getCheckedNodes(false, true).map((i) => i.id);let arr = [];// treeData是所有的节点,templateList是所有父节点,所以还需要遍历treeData取出父节点再将length和templateList做比较this.treeData.map((item) => {if (this.$refs.tree.getNode(item).isLeaf == false) {arr.push(item);}});if (arr.length) {if (arr.length == this.templateList.length) {this.checkAll = true;this.indeterminate = false;} else if (arr.length < this.templateList.length) {console.log(1111);this.checkAll = false;this.indeterminate = true;} else {this.checkAll = false;this.indeterminate = false;}}},}

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

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

相关文章

1-1 prometheus 概述

一、概述 二、特点 三、核心组件 四、基础架构 4.1 Prometheus 的主要模块包含 4.2 运行逻辑 五、Prometheus 与 Zabbix 的对比 六、总结 一、概述 1. 什么是prometheus? 开源系统监控 和 警报工具包受启发于Google的Brogmon监控系统(相似的Kubernetes是从Google的Br…

518抽奖软件,可从Excel~Word~Pdf~网页导入名单

518抽奖软件简介 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 从Excel、WPS表格导入 整列&#xff1a; 用鼠…

华泰证券:新奥能源:零售气待恢复,泛能与智家仍是亮点

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;由于新奥能源&#xff08;02688&#xff09;发布三季度经营数据&#xff1a; 1-3Q23&#xff1a;天然气零售量yoy-4.7%&#xff0c;燃气批发量yoy17.6%&#xff0c;综合能源销量yoy34.2%&#xff…

Java中 #{}和${}的区别

2023.10.31 #{}&#xff1a;先编译sql语句&#xff0c;再给占位符传值&#xff0c;底层是PreparedStatement实现。可以防止sql注入&#xff0c;比较常用。 ${}&#xff1a;先进行sql语句拼接&#xff0c;然后再编译sql语句&#xff0c;底层是Statement实现。存在sql注入现象。…

A. Directional Increase -前缀和与差分理解 + 思维

题面 分析 观察指针移动的性质&#xff0c;可以发现每一段都是从起点走到终点&#xff0c;在原路返回&#xff0c;这样每一段也就表示&#xff0c;在起点处加一&#xff0c;在终点处减一&#xff0c;形成了很明显的差分结构&#xff0c;思考能否构造出a数组的关键就是他的前缀…

JavaScript之React

前言 React 是一个用于构建用户界面的 JavaScript 库&#xff0c;由 Facebook 开发。它可以让开发者编写可重复使用的 UI 组件&#xff0c;并且可以自动地更新 UI。React 的运行原理可以分为两个部分&#xff1a;虚拟 DOM 和组件更新。 虚拟 DOM React 使用虚拟 DOM 来代表实…

生态扩展:Flink Doris Connector

生态扩展&#xff1a;Flink Doris Connector 官网地址&#xff1a; https://doris.apache.org/zh-CN/docs/dev/ecosystem/flink-doris-connector flink的安装&#xff1a; tar -zxvf flink-1.16.0-bin-scala_2.12.tgz mv flink-1.16.0-bin-scala_2.12.tgz /opt/flinkflink环境…

相关性网络图 |显著性标记

一边学习&#xff0c;一边总结&#xff0c;一边分享&#xff01; 本期教程 写在前面 此图是一位同学看到后&#xff0c;想出的一期教程。 最近&#xff0c;自己的事情比较多&#xff0c;会无暇顾及社群和公众号教程。 1 安装和加载相关的R包 library(ggraph) library(tidy…

MATLAB R2018b详细安装教程(附资源)

云盘链接&#xff1a; pan.baidu.com/s/1SsfNtlG96umfXdhaEOPT1g 提取码&#xff1a;1024 大小&#xff1a;11.77GB 安装环境&#xff1a;Win10/Win8/Win7 安装步骤&#xff1a; 1.鼠标右击【R2018b(64bit)】压缩包选择【解压到 R2018b(64bit)】 2.打开解压后的文件夹中的…

笔记本电脑的键盘鼠标如何共享控制另外一台电脑

环境&#xff1a; 联想E14 x2 Win10 across 2.0 问题描述&#xff1a; 笔记本电脑的键盘鼠标如何共享控制另外一台电脑 解决方案&#xff1a; 1.下载across软件&#xff0c;2台电脑都按装&#xff0c;一台设为服务端&#xff0c;一台客户端 2.把配对好设备拖到右边左侧…

第3章_基本select语句

文章目录 SQL概述SQL背景知识SQL分类 SQL语言的规则与规范SQL语言的规则SQL大小写规范注释命令规则&#xff08;暂时了解&#xff09;数据导入指令 基本的select语句select ...select ... from列的别名去除重复行空值参与运算着重号查询常数 显示表结构讲课代码课后练习 SQL概述…

【Spring Boot】详解restful api

目录 1.restful api 1.1.历史 1.2.内容 1.3.传参 2.Spring Boot中的Restful Api 1.restful api 1.1.历史 RESTful API&#xff08;Representational State Transferful Application Programming Interface&#xff09;是一种设计风格&#xff0c;用于构建基于网络的应用…

微信小程序怎么制作?【小程序开发平台教学】

随着移动互联网的快速发展&#xff0c;微信小程序已经成为了人们日常生活中不可或缺的一部分。从购物、支付、出行到社交、娱乐、教育&#xff0c;小程序几乎涵盖了我们生活的方方面面。那么&#xff0c;对于有营销需求的企业商家来说&#xff0c;如何制作一个自己的微信小程序…

RPC与HTTP的关系

首选理清楚关系 RPC与HTTP是两个不同维度的东西 HTTP 协议&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff0c;又叫做超文本传输协议&#xff0c;是一种传输协议&#xff0c;平时通过浏览器浏览网页网页&#xff0c;用到的就是 HTTP 协议。 而 RPC&#xff0…

10.2 一文读懂SPI与DSPI、QSPI、OSPI关系与异同

本文主要内容: 1 SPI与DSPI、QSPI、OSPI定义 2 SPI与xSPI对比 3 常用的nor flash 4 驱动架构 5 xSPI镜像烧录 1 SPI与DSPI、QSPI、OSPI定义 1)标准SPI 通过说的SPI,称为标准SPI,是一种串行外设接口,通过有4根线控制,CLK、CS、MISO、MOSI,可工作于4种模式,一般是主机…

【Unity小技巧】可靠的相机抖动及如何同时处理多个震动(附项目源码)

文章目录 每篇一句前言安装虚拟相机虚拟相机震动测试代码控制震动清除震动控制震动的幅度和时间 两个不同的强弱震动同时发生源码完结 每篇一句 围在城里的人想逃出来&#xff0c;站在城外的人想冲进去&#xff0c;婚姻也罢&#xff0c;事业也罢&#xff0c;人生的欲望大都如此…

三.RocketMQ单机安装及集群搭建

RocketMQ单机安装及集群搭建 一&#xff1a;安装环境1.软硬件要求2.下载RocketMQ 二.安装单机MQ1.上传并解压2.目录介绍3.修改MQ启动时初始JVM内存4.启动NameServer与Broker5.测试RocketMQ 三.RocketMQ集群搭建1.集群概念特点2.集群模式分类3.集群工作流程4.双主双从集群搭建4.…

【C++】C++11常见特性

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

13.测试

13.1测试基础概念 13.2测试用例 13.3测试用例进阶 13.4web自动化测试(Selenium3Java) 13.5 Junit5(针对Java的单元测试框架) 13.6性能测试理论 13.7性能测试工具(LoadRunner)(简单扫盲)