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

news2024/9/21 4:34:49

// <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.coloradmin.cn/o/1153477.html

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

相关文章

足底筋膜炎怎么治疗最有效

足底筋膜炎的几种症状表现&#xff1a; 1、足跟的内侧足底处的疼痛和压痛。 2、早晨起床后疼痛和僵硬明显&#xff0c;活动后痛感逐渐减轻。 3、光脚或用脚尖跑步、走路都会加剧疼痛。 4、疼痛随着跑步、长时间走路或站立等负重活动而加剧。轻度时可能会以足底僵硬为主&…

可直接在Maya实时表情捕捉的面捕头盔,为3D模型表情制作提速!

面捕表情捕捉头盔可以用于捕捉真人的面部表情&#xff0c;从微小的皱纹到大的脸部肌肉运动&#xff0c;通过面捕头盔&#xff0c;都可以实时转化到虚拟角色上。 在元宇宙浪潮下&#xff0c;围绕虚拟人的应用场景和时长变得愈加多元&#xff0c;人们对虚拟人的精度不再仅限于简…

01.CentOS7静默安装oracle11g

CentOS7静默安装oracle11g 一、下载Oracle11g安装包二、开始安装oracle11g三、配置Oracle监听程序四、添加数据库实例五、设置开机启动六、登录后解除锁定 一、下载Oracle11g安装包 下载链接&#xff1a;https://pan.baidu.com/s/1gcLMFGX7-8ju7OoFOFLzQA 提取码&#xff1a;6…

python_PyQt5日周月K线纵向对齐显示_3_聚焦某段图形

目录 写在前面&#xff1a; 结果显示&#xff1a; 代码&#xff1a; 写在前面&#xff1a; “PyQt5日周月K线纵向对齐显示”&#xff0c;将分三篇博文描述 1 数据处理。将数据处理成适合图形显示的格式。&#xff08;已写&#xff0c;请看往期博文&#xff09; 2 显示工具…

搜维尔科技:Varjo在心理学、医学研究、技术、工程学等领域都在使用

该软件用于心理学、医学研究、可用性、品牌和营销等领域。vajio头显组合到了运动8.0平台中,提供了在高保真虚拟环境中进行的行为研究,否则这些环境的成本太高,不切实际,甚至无法在现实世界中再现。 在心理学、医学研究、可用性、技术、工程学、市场营销等领域工作的学术和商业研…

【项目管理】生命周期风险评估

规划阶段目标&#xff1a;识别系统的业务战略&#xff0c;以支撑系统的安全需求及安全战略 规划阶段评估重点&#xff1a;1、本阶段不需要识别资产和脆弱性&#xff1b;2、应根据被评估对象的应用对象、应用环境、业务状况、操作要求等方面识别威胁&#xff1b; 设计阶段目标…

草莓熊代码

话不多说直接上代码 如果需要exe文件电脑可以不依赖环境直接运行请评论或者私信 注意: 不需要年月日显示 注释 879-894 行不需要雪花显示 注释 895-908 行不需要礼物显示 注释 771 行653行 可以修改 祝你节日快乐内容657行 可以修改 草莓熊 内容修改程序标题 第 16 行# -*- co…

Tower for Mac—Git客户端 支持M1

Tower是一款Mac OS X系统上的Git客户端软件&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户更加方便地管理和使用Git版本控制系统。以下是Tower的一些特点&#xff1a; 1. 界面友好&#xff1a;Tower的界面友好&#xff0c;使用户能够轻松地掌握软件的使用方法。 …

使用考试培训系统定制适合不同学生需求的教学内容

考试培训系统是一种方便高效的教育工具&#xff0c;可以根据不同学生的需求定制教学内容。通过使用这个系统&#xff0c;教师可以为学生提供个性化的学习计划&#xff0c;帮助他们提高学习效果。以下将详细介绍如何使用考试培训系统定制适合不同学生需求的教学内容。 考试培训系…

联手皇室企业 哪吒汽车发力阿联酋

布局阿联酋,哪吒汽车全球化战略加速落地。10月27日,哪吒汽车与阿联酋知名企业——EIH Automotive &Trading,在上海签署战略合作协议,并宣布2024年将为阿联酋带去多款车型。拥有皇室背景的EIH Automotive &Trading,将成为哪吒汽车在阿联酋的首家战略经销商,加速哪吒汽车…

【深度学习实验】网络优化与正则化(二):基于自适应学习率的优化算法详解:Adagrad、Adadelta、RMSprop

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

Termux SFTP如何实现远程文件传输

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFTP使用了…

LSH 复习(考试向)

LSH Review OverallMinhash SignaturesBinary Matrix&#xff08;bit-vector&#xff09;Construct MinHash matrixGenerate simulated permutationsJaccard similarities Tuning Parameters for rNNS Overall hash就是将不同长度规则的文本转化成相同长度的字符串&#xff0c…

问CHAT:以“重要性”为题写一篇作文

今天小编带大家看看&#xff0c;如何利用CHAT 写一篇作文&#xff0c;那我们来根据要求来问它。 问CHAT &#xff1a;以“重要性”为题写一篇作文&#xff0c;非语言交流的基础”根据下面的提纲来写作文。 1)非言语交际概述。 (暗示:暗示、敏感、情感、非语言) 2)非言语交际的…

Leetcode刷题---搜索插入位置(Java实现二分查找算法)

题目描述&#xff1a; 题解一 class Solution {public int searchInsert(int[] nums, int target) {int i0;while(i<nums.length){if(nums[i]>target){return i;}if(nums[i]<target ){i;}}return i;} }题解二—使用二分查找算法 使用算法前提&#xff1a;数组是一…

52张扑克牌(Python字符串替换)

输入a~d的字母对应扑克牌黑、红、梅、方花色 1~13数字对应扑克牌点数&#xff1b;输出“字母数字”字符串对应的扑克牌花色和点数。 (本笔记适合熟悉Python循环和str字符串处理的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free…

【二叉树经典题目】

根据二叉树创建字符串 本题的关键在于什么情况要省略括号&#xff0c;什么情况不能省略&#xff1a; 左右为空可以省略括号 左不为空&#xff0c;右为空可以省略括号左为空,右不为空不能省略括号 class Solution { public://1.左右为空可以省略括号//2.左不为空&#xff0c;右…

杰林码纠错算法库(lib、dll)以及AWGN信道BPSK信号下的仿真程序(C/C++)

2023年10月30日此次是我最后一次在国内发布纠错算法的测试程序&#xff0c;这个算法2018年左右就出来了第一个版本&#xff0c;部分网络上也能下载到测试程序&#xff0c;尽管以前的版本效率跟不上&#xff0c;而且码率比较固定只能支持0.63。通过几年的努力&#xff0c;我这次…

分享一下怎么做一个同城配送小程序

如何制作一个同城配送小程序&#xff1a;功能特点、使用指南及未来展望 一、引言 随着互联网的快速发展&#xff0c;人们对于生活服务的需求越来越高。同城配送作为连接消费者与商家的桥梁&#xff0c;越来越受到人们的关注。本文将详细介绍如何制作一个同城配送小程序&#…

oracel处理XML时,报ORA-31011、ORA-19202。

原字段为clob&#xff0c; 查询 SELECT XMLTYPE(字段) FROM TABLE_A报错如下&#xff1a; ORA-31011: XML 语法分析失败 ORA-19202: XML 处理 LPX-00217: invalid character 12 (U000C) Error at line 1559时出错 ORA-06512: 在 "SYS.XMLTYPE", line 272 ORA-0651…