VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开(收起);一键全选(不全选)

news2024/12/23 8:34:07

需求: 产品要求权限树形结构添加外部复选框进行全部展开或收起;全选或不全选。

实现步骤:
tree组件部分:

<div class="role-handle">
   <div>权限选择(可多选)</div>
   <div>
     <el-checkbox v-model="expandAll" @change="toggleExpandAll"> 展开/折叠 </el-checkbox>

     <el-checkbox v-model="checkAll" @change="handleCheckAllChange"> 全选/全不选 </el-checkbox>
   </div>
 </div>
<el-tree
   ref="treeRef"
   node-key="code"
   show-checkbox
   v-loading="loading"
   element-loading-text="权限资源加载中..."
   class="el-tree"
   :indent="12"
   :data="treeData"
   :props="defaultProps"
   :highlight-current="true"
   :default-expand-all="false"
   :expand-on-click-node="false"
   :default-checked-keys="menuIds"
   :default-expanded-keys="expandedKeys"
   @check="handleCheckChange"
 />

ts部分:

const checkAll: any = ref(false);
const expandAll: any = ref(false);
//略去其他变量;可查看文档自行配置
// 展开
const toggleExpandAll = (type: any) => {
  //expandAll.value = type; 调整赋值位置checkbox卡顿明细减轻
  if (type) {
  	expandAll.value = true;
    Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
    return;
  }
  expandAll.value = false;
  Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};
// 全选
const handleCheckAllChange = (val: any) => {
  setCheckedRecursive(treeData.value, val);
};
const setCheckedRecursive = (nodes: any, checked: any) => {
  for (const node of nodes) {
    treeRef.value.setChecked(node.code, checked);
    if (node.child && node.child.length > 0) {
      setCheckedRecursive(node.child, checked);
    }
  }
};

页面效果:
默认状态
在这里插入图片描述

展开状态
在这里插入图片描述

折叠状态
在这里插入图片描述

全选状态
在这里插入图片描述
全不选状态
在这里插入图片描述
注意:以上方法会展开或折叠所有节点;全选或全不选节点。
问题:数据量过大以上操作会有明显卡顿;有高效解决方法的朋友可以交流。
修改TODO:调整checkbox赋值世纪后,checkbox卡顿明细减轻。

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

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

相关文章

micropython开发与实战阅读笔记

对本文的一些说明 本文来源于阅读《MicroPython开发与实战》时所做的笔记&#xff0c;这本书不是很厚&#xff0c;所以内容也不是很全面&#xff0c;但作为一个入门工具书还是够的&#xff0c;再由于本人不是这方面的大佬&#xff0c;也不是这个专业的&#xff0c;所做的笔记也…

C++ UML 类图介绍与设计

1 类图概述 UML(Unified Modeling Language)&#xff0c;即统一建模语言&#xff0c;是用来设计软件的可视化建模语言。它的特点是简单、统一、图形化、能表达软件设计中的动态与静态信息。UML从目标系统的不同角度出发&#xff0c;定义了用例图、类图、对象图、状态图、活动图…

C++ stl容器list的底层模拟实现

目录 前言&#xff1a; 1.创建节点 2.普通迭代器的封装 3.反向迭代器的封装 为什么要对正向迭代器进行封装&#xff1f; 4.const迭代器 5.构造函数 6.拷贝构造 7.赋值重载 8.insert 9.erase 10.析构 11.头插头删&#xff0c;尾插尾删 12.完整代码简单测试 总结&…

【艾体宝方案】智驾未来:高性能实时数据库,车企的数据分析变革!

近年来&#xff0c;汽车行业持续朝向互联互通以及自动化方向的演进&#xff0c;无论是在优化制造流程、提升车辆安全与性能&#xff0c;还是提供定制化客户体验方面&#xff0c;汽车行业的都未来牢牢根植于其有效处理和利用数据的能力。 一、汽车行业面临的挑战 &#xff08;…

group by 多字段分组查询和 order by

直接看试验步骤就知道了. 表 一.单列group by 执行单列group by语句 SELECT name, COUNT(1) count FROM nomol GROUP BY name 执行结果 我们发现他把原始表分为了两个小组&#xff0c;狗狗小组和猫猫小组。从这可以看出分组查询就是把相同的数据分到一个组 . 二.多列group …

在做程序员的道路上,你掌握了什么概念或技术使你感觉自我提升突飞猛进?

不要扯那些假大空或是看似高级的技术概念&#xff0c;真正让我感觉到自我提升突飞猛进的是摒弃了码农思维。 先别开骂&#xff0c;我指的码农思维是把自己当代码工人的码农思维。其实程序员本质上就是打工人&#xff0c;无论是掌握了高新技术的程序员&#xff0c;还是在底层摸爬…

MT3026 砍玉米

样例1&#xff1a; 输入&#xff1a; 6 1 3 4 2 5 1 7 8 19 10 30 2 输出&#xff1a; 6 其中1<n<10^5,1<xi,hi<10^9 思路&#xff1a;贪心&#xff1a;从左到右或者从右到左依次判断每一棵玉米是否可以倒下 &#xff08;以从左到右为例&#xff1a;先往左倒&…

Windows版Apache 2.4.59解压直用(免安装-绿色-项目打包直接使用)

windows下Apache分类 Apache分为 安装版和解压版 安装版: 安装方便&#xff0c;下一步------下一步就OK了&#xff0c;但重装系统更换环境又要重新来一遍&#xff0c;会特别麻烦 解压版&#xff08;推荐&#xff09;&#xff1a; 这种方式&#xff08;项目打包特别方便&#x…

c++修炼之路之vector--标准库中的vector

目录 前言 一&#xff1a;vector的简介 二&#xff1a;vector的常用接口 1.构造函数 2.迭代器访问遍历数组 3.容量接口函数 4.增删查改接口函数 三&#xff1a;vector常用接口的全部代码 接下来的日子会顺顺利利&#xff0c;万事胜意&#xff0c;生活明朗----------…

钉钉OA审批评论接口,如何@ 人并发送通知

钉钉OA审批评论接口&#xff0c;如何 人并发送通 问题描述&#xff1a; 相关接口&#xff1a;https://oapi.dingtalk.com/topapi/process/instance/comment/add 我希望在钉钉oa审批流程中&#xff0c;添加评论的同时通过“”或者其他方式提醒流程发起人去跟进审批工作。 但我…

比起本地渲染,网渲的优势在哪里?渲染100邀请码1a12

网渲的应用很广泛&#xff0c;在建筑设计和室内装修等行业都能看到它的身影&#xff0c;比起本地渲染&#xff0c;它有以下几个优势。 1、资源充足 网渲平台的资源充足&#xff0c;会根据渲染作业的规模和复杂度自动扩展或缩减分配&#xff0c;以达到动态调节的目的&#xff0c…

小米汽车SU7隐藏款曝光!新配色和透明车身亮了 coreldraw教程入门零基础 coreldraw下载 coreldraw2024

刘强东说&#xff0c;论营销&#xff0c;没有任何人能比得过小米。 小米SU7发布会24小时&#xff0c;下定量就超过了蔚来汽车2023年四季度的交付量。 ▲雷军发布的小米SU7 24小时订单量 小米SU7发布会后五天&#xff0c;雷军在北京亦庄工厂亲自交付了第一批创世版本小米SU7&a…

【性能测试】接口测试各知识第4篇:Jmeter 八大元件及执行顺序,学习目标【附代码文档】

接口测试完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;接口测试&#xff0c;学习目标学习目标,2. 接口测试课程大纲,3. 接口学完样品,4. 学完课程,学到什么,5. 参考:,1. 理解接口的概念。学习目标&#xff0c;RESTFUL1. 理解接口的概念,2.什么是接口测试…

《综合品酒师》培训刷新纪录:FENDI CLUB精酿啤酒点亮行业里程碑

导语&#xff1a;在璀璨的品酒文化星空中&#xff0c;一颗新星正悄然升起&#xff0c;它就是云仓酒庄。近日&#xff0c;云仓酒庄成功举办的《综合品酒师》培训活动不仅刷新了大世界基尼斯纪录&#xff0c;更以其与众不同的FENDI CLUB精酿啤酒品鉴课程引起了品酒新风尚。这一盛…

TCP的一些功能详述

文章制作不易&#xff0c;望各位大佬多多点赞&#xff0c;球球各位啦&#xff01;&#xff01;&#xff01;&#xff01; 目录 1.TCP的简介 2.TCP协议中部分数据的理解 1.端口号 2.序列号 3.四位首部长度 4.6位保留位 5. 16位校验和 6.数据&#xff08;TCP的载荷&#…

upload-labs第九十关

第九关 $is_upload false; $msg null; if (isset($_POST[submit])) {if (file_exists(UPLOAD_PATH)) {$deny_ext array(".php",".php5",".php4",".php3",".php2",".html",".htm",".phtml"…

HarmonyOS Next 悬浮窗拖拽和吸附动画

介绍 本示例使用position绝对定位实现应用内悬浮窗&#xff0c;并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。 效果图预览 使用说明 按住悬浮窗可以拖拽&#xff0c;松开后悬浮窗自动靠左或靠右&#xff0c;如果悬浮窗超出内容区上…

【C++】深度解析--拷贝构造函数(从0开始,详解浅拷贝到深拷贝,小白一看就懂!!!)

目录 一、前言 二、拷贝构造函数 &#x1f34e;概念解析 &#x1f95d;特性解析 &#x1f4a6;为什么拷贝构造函数使用传值方式会引发无穷递归调用&#xff1f; &#x1f4a6;为什么拷贝构造函数的形参中要加入 const 修饰 &#x1f4a6;若未显式定义&#xff0c;编译器会生…

c语言,单链表的实现----------有全代码!!!!

1.单链表的定义和结构 单链表是一种链式的数据结构&#xff0c;它用一组不连续的储存单元存反线性表中的数据元素。链表中的数据是以节点的形式来表示的&#xff0c;节点和节点之间相互连接 一般来说节点有两部分组成 1.数据域 &#xff1a;数据域用来存储各种类型的数据&…

深入理解同步与异步编程及协程管理在Python中的应用

文章目录 1. 同步与异步函数的对比1.1 同步函数1.2 异步函数1.3 对比 2. 管理多个协程与异常处理2.1 并发执行多个协程2.2 错误处理2.3 任务取消 本文将探索Python中同步与异步编程的基本概念及其区别。还会详细介绍如何使用asyncio库来有效管理协程&#xff0c;包括任务的创建…