el-tree父子不互相关联时,手动实现全选、反选、子级全选、清空功能
el-tree父子不互相关联时,手动实现全选、反选、子级全选、清空功能
1、功能实现图示

2、实现思路
当属性check-strictly为true时,父子节点不互相关联,如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点,十分麻烦。可以通过ref操做el-tree的getCheckedKeys、getCheckedNodes、setCheckedKeys方法手动快速节点选择。
3、代码实现
<template><div class="list_tree"><div class="flex mb10"><el-buttonv-for="item in treeButtonProps"size="mini"type="primary"class="mr5":key="item.treeKey":disabled="item.isDisb ? isdisChildAll : false"@click="onChecked(item.treeKey)">{{ item.text }}</el-button></div><el-treeref="treeRef":data="treeData"show-checkboxnode-key="deptId"check-strictlydefault-expand-all@check-change="checkChange"/></div>
</template><script>
export default {data() {return {// tree数据结构....treeData: [{deptId: '130200',label: '河北省/唐山市',pid: null,regionCode: '130200',type: '1',topId: null,children: [{deptId: '13020001',label: '唐山教育局',pid: '130200',regionCode: '130200',type: '2',topId: '130200',children: [{deptId: '130200001',label: '唐山初级中学校',pid: '13020001',regionCode: '130200',type: '2',children: null,topId: '130200'},{deptId: '130200002',label: '唐山市初级二中',pid: '13020001',regionCode: '130200',type: '2',children: null,topId: '130200'}]}]}/// more-data.......],isdisChildAll: false,treeKeysList: [],treeButtonProps: [{ text: '全选', isDisb: false, treeKey: 'all' },{ text: '反选', isDisb: false, treeKey: 'reverse' },{ text: '子级全选', isDisb: true, treeKey: 'childAll' },{ text: '清空', isDisb: false, treeKey: 'clear' }]};},methods: {// 获取树所有key集合getTreeKeys() {this.treeKeysList = [];const treeData = deepClone(this.treeData);while (treeData.length > 0) {const item = treeData.pop();this.treeKeysList.push(item.deptId);if (item.children && item.children.length > 0) {treeData.push(...item.children);}}},// 设置子级全选是否禁用checkChange(data, checked) {// 没有选中含有子级节点时禁用if (checked) {this.isdisChildAll = !(data.children && data.children.length > 0);} else {this.isdisChildAll = true;}},// 全选、反选、子级全选、清空onChecked(type) {// 最终选中的keyslet setKeysList = [];const treeNode = this.$refs.treeRef;// 已选中keysconst checkedKeys = treeNode.getCheckedKeys();if (type == 'clear') {setKeysList = [];}if (type == 'all') {setKeysList = this.treeKeysList;}if (type == 'reverse') {// 未选中keys集合setKeysList = this.treeKeysList.filter(item => checkedKeys.indexOf(item) == -1);}if (type == 'childAll') {setKeysList = checkedKeys;// 目前被选中的节点所组成的数组const checkNodes = treeNode.getCheckedNodes();// 筛选出有子节点的nodeconst hasChildNodes = checkNodes.filter(item => item.children && item.children.length > 0);// 循环遍历出子节点集合while (hasChildNodes.length > 0) {const item = hasChildNodes.pop();setKeysList.push(item.deptId);if (item.children && item.children.length > 0) {hasChildNodes.push(...item.children);}}}// 设置节点选中状态treeNode.setCheckedKeys(setKeysList);}}
};
</script>
本文由博客一文多发平台 OpenWrite 发布!
相关文章:
el-tree父子不互相关联时,手动实现全选、反选、子级全选、清空功能
el-tree父子不互相关联时,手动实现全选、反选、子级全选、清空功能 1、功能实现图示 2、实现思路 当属性check-strictly为true时,父子节点不互相关联,如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点,十分麻…...
模板与泛型编程笔记(一)入门篇
1. 推荐书籍 《C新经典 模板与泛型编程》难得的很容易看得懂的好书,作者讲技术不跳跃,娓娓道来,只要花点时间就能看懂。 2. 笔记 2.1 模板基础 模板为什么要用尖括号?因为便于编译器解析,可以将模板和普通函数声明…...
浅谈WebApi
一、基本介绍 Web API(Web应用程序编程接口)是一种用于构建应用程序的接口,它允许软件应用程序通过HTTP请求与Web服务器进行交互。Web API通常用于构建客户端-服务器应用程序,其中客户端可以是Web浏览器、移动应用程序、桌面应用程…...
9月14日,每日信息差
第一、宝马集团宣布对设计部门进行重组,并将于 2024 年 10 月 1 日成立一个跨品牌设计团队,由范・霍伊顿克领导。该团队将引入极星汽车设计主管马克西米利安・米索尼,负责宝马中高档和豪华车型以及宝马 Alpina 的设计工作。 第二、小鹏汇天飞…...
无人机控制与三维AI感知处理平台正式上线!
低空经济被誉为推动我国经济高质量发展的全新增长引擎,是一种以民用有人驾驶和无人驾驶航空器的各类低空飞行活动为牵引,辐射带动相关领域融合发展的综合性经济形态,2024年全国两会首次被纳入政府工作报告。 大势智慧积极响应国家低空经济政…...
9.11-kubeadm方式安装k8s
一、安装环境 编号主机名称ip地址1k8s-master192.168.2.662k8s-node01192.168.2.773k8s-node02192.168.2.88 二、前期准备 1.设置免密登录 [rootk8s-master ~]# ssh-keygen [rootk8s-master ~]# ssh-copy-id root192.168.2.77 [rootk8s-master ~]# ssh-copy-id root192.168…...
限流,流量整形算法
写在前面 源码 。 本文看下流量整形相关算法。 目前流量整形算法主要有三种,计数器,漏桶,令牌桶。分别看下咯! 1:计数器 1.1:描述 单位时间内只允许指定数量的请求,如果是时间区间内超过指…...
【C++知识扫盲】------C++ 中的引用入门
在 C 中,引用(reference) 是一个非常重要的概念,它提供了一种别名机制,让我们可以给已经存在的变量起一个新的名字,并且能够通过这个别名直接操作原始变量。本文将详细介绍引用的定义、使用场景及其与指针的…...
【机器学习】6 ——最大熵模型
机器学习6——最大熵模型 目录 机器学习6——最大熵模型最大熵(maximum entropy)模型模型模型学习(估计参数)模型评价应用 最大熵(maximum entropy)模型 选择熵最大的概率模型 熵是衡量不确定性的…...
小程序——生命周期
文章目录 运行机制更新机制生命周期介绍应用级别生命周期页面级别生命周期组件生命周期生命周期两个细节补充说明总结 运行机制 用一张图简要概述一下小程序的运行机制 冷启动与热启动: 小程序启动可以分为两种情况,一种是冷启动,一种是热…...
基于微信小程序的宠物之家的设计与实现
作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的宠物之家/宠物综合…...
自定义EPICS在LabVIEW中的测试
继续上一篇:LabVIEW中EPICS客户端/服务端的测试 变量定义 You can use CaLabSoftIOC.vi to create new EPICS variables and start them. CA Lab - LabVIEW (Realtime) EPICS INPUT: PV set Cluster-array of names, data types and field definitions to crea…...
基于深度学习的农作物病害检测
基于深度学习的农作物病害检测利用卷积神经网络(CNN)、生成对抗网络(GAN)、Transformer等深度学习技术,自动识别和分类农作物的病害,帮助农业工作者提高作物管理效率、减少损失。 1. 农作物病害检测的挑战…...
【C#】命名规范
文章目录 C# 命名规范使用Pascal case使用Camel case方法、属性、类命名见名知义LINQ查询变量使用有意义的名称如何声明成员变量和字段正确格式化和缩进代码如何撰写备注 通用C#编码最佳实践如何将值与空字符串进行比较使用异常处理使用&&和||可获得更好的性能单一职责…...
超级帐本(Hyperledger)
1. Hyperledger 项目 Hyperledger 下有两类项目:第一类是区块链框架项目;第二类是支持这些区块链的相关工具或模块。 在 Hyperledger 框架下,目前有 5 个区块链框架项目:Fabric、Sawtooth Lake、Iroha、Burrow 和 Indy。 在模块类下,则有 Hyp…...
如何精细优化网站关键词排名:实战经验分享
在数字营销日益激烈的今天,我深知每一个关键词的排名都关乎着网站的流量与转化。凭借多年的实战经验,我深刻体会到,要想在浩如烟海的网络世界中脱颖而出,精细化的关键词优化策略至关重要。今天,我将从实战角度出发&…...
Ruoyi Cloud 本地启动
本文视频版本:https://www.bilibili.com/video/BV1SNtueBE9M 参考 http://doc.ruoyi.vip/ https://gitee.com/y_project/RuoYi-Cloud https://blog.csdn.net/cs_dnzk/article/details/135289966 https://doc.ruoyi.vip/ruoyi-cloud/cloud/seata.html#%E5%9F%BA%E6…...
Nginx解析:入门笔记
🌈 个人主页:danci_ 🔥 系列专栏:《设计模式》《MYSQL》 💪🏻 制定明确可量化的目标,坚持默默的做事。 ✨欢迎加入探索nginx之旅✨ 👋 大家好!文本学习和探索Nginx配置。…...
在 Mac 上安装双系统会影响性能吗,安装双系统会清除数据吗?
在 Mac 系统安装并使用双系统已经成为了许多用户办公的选择之一,双系统可以让用户在 Mac 上同时运行 Windows 或其他操作系统。然而,许多用户担心这样做会对 Mac 的性能产生影响。 接下来将给大家介绍 Mac 装双系统会影响性能吗,Mac装双系统…...
vue3提交按钮限制重复点击
下载lodash npm install lodash 引入并使用 <template><div click"submit()">提交</div> </template><script setup>import { debounce } from lodash;const submit debounce(() > {//业务代码},2000,{leading: true,trailing:…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
Python训练营-Day26-函数专题1:函数定义与参数
题目1:计算圆的面积 任务: 编写一个名为 calculate_circle_area 的函数,该函数接收圆的半径 radius 作为参数,并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求:函数接收一个位置参数 radi…...
