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

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

实现步骤:
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;
  if (type) {
    Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
    return;
  }
  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);
    }
  }
};

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

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

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

全选状态
在这里插入图片描述
全不选状态
在这里插入图片描述
注意:以上方法会展开或折叠所有节点;全选或全不选节点。
问题:数据量过大以上操作会有明显卡顿;有高效解决方法的朋友可以交流。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Harmony鸿蒙南向驱动开发-MIPI DSI

功能简介 DSI&#xff08;Display Serial Interface&#xff09;是由移动行业处理器接口联盟&#xff08;Mobile Industry Processor Interface (MIPI) Alliance&#xff09;制定的规范&#xff0c;旨在降低移动设备中显示控制器的成本。它以串行的方式发送像素数据或指令给外…

pytest常用钩子函数

1、什么叫钩子函数 在Pytest框架中&#xff0c;钩子函数是一种允许用户扩展或者自定义测试执行过程的机制。钩子函数允许用户在测试的不同阶段插入自定义的代码&#xff0c;以实现特定的行为&#xff0c;操作或处理。这种插入式的机制使得Pytest具有高度的灵活性和扩展性。 如…

Android 四大组件启动

service: startService启动过程分析 - Gityuan博客 | 袁辉辉的技术博客 在整个startService过程&#xff0c;从进程角度看服务启动过程 Process A进程&#xff1a;是指调用startService命令所在的进程&#xff0c;也就是启动服务的发起端进程&#xff0c;比如点击桌面App图标…

Linux:自动化构建 - make

Linux&#xff1a;自动化构建 - make make基本概念makefile语法变量PHONY make基本概念 make是一个用于自动化编译和构建过程的工具。它主要用于管理大型软件项目的构建过程,帮助开发者更高效地编译和部署代码&#xff0c;并减少人为错误的发生&#xff0c;这使得软件的编译和…

Linux应用实战之网络服务器(五) 登录服务器初步调试

0、前言 准备做一个Linux网络服务器应用实战&#xff0c;通过网页和运行在Linux下的服务器程序通信&#xff0c;这是第五篇&#xff0c;编写服务器程序&#xff0c;与编写好的登录界面进行初步调试。 1、服务器编程 1.1 TCP服务器编程 在之前的登录界面中&#xff0c;我们指…

使用Docker部署开源项目FreeGPT35来免费调用ChatGPT3.5 API

Vercel部署FreeGPT35有严重限制&#xff0c;玩玩就好&#xff0c;真用还是得docker。 限制原因: Vercel的流式响应并不是一开始写流&#xff0c;客户端就能立刻收到响应流&#xff0c;而是先写到一个缓冲区&#xff0c;当流关闭才一股脑的流式响应回来(不是实时流) 因此导致: …

创意解决方案:如何将作品集视频集中于一个二维码或链接中?

引言&#xff1a;随着面试环节的进一步数字化&#xff0c;展示自己的作品集成为了求职过程中的重要一环。但除了使用传统的方式&#xff0c;如百度网盘或直接发送多个视频链接&#xff0c;有没有更便捷的方法将作品集的多个视频放在一个链接中呢? 本文将介绍一种创意解决方案…

系统监控-硬件资源-内存篇01-整体思路-性能指标-性能工具概览-Buffer/Cache

参考来源&#xff1a;性能优化实战 内存的功能主要用来存储系统和应用程序的指令、数据、缓存等。 内存性能分析整体思路 当你看到系统的剩余内存很低时&#xff0c;是不是就说明&#xff0c;进程一定不能申请分配新内存了呢&#xff1f;当然不是&#xff0c;因为进程可以使…

5.2 配置静态路由

5.2.1 实验1&#xff1a;配置IPv4静态路由 1、实验目的 通过本实验可以掌握&#xff1a; 配置带下一跳地址的IPv4静态路由的方法。配置带送出接口的IPv4静态路由的方法。配置总结IPv4静态路由的方法。配置浮动IPv4静态路由的方法。代理 ARP的作用。路由表的含义。扩展ping命…

数据仓库与数据挖掘(第三版)陈文伟思维导图1-5章作业

第一章 概述 8.基于数据仓库的决策支持系统与传统决策支持系统有哪些区别&#xff1f; 决策支持系统经历了4个阶段。 1.基本决策支持系统 是在运筹学单模型辅助决策的基础上发展起来的&#xff0c;以模型库系统为核心&#xff0c;以多模型和数据库的组合形成方案辅助决策。 它…

hal库实现串口通信——阻塞式 API

1STM32CobeMX设置 设置时钟源 rcc设置为外部时钟High Speed Clock (HSE)//设置为如图 再将其设置为72MHz 设置串口引脚为异步通信 设置波特率等 设置波特率范围提示点击波特率再点击图中的 我的设置 再打开中断 即可生成代码//省略项目设置 2代码设置 函数 HAL_UART_Trans…

探索数据中台的力量:企业数据资产管理的未来_光点科技

随着数字化时代的到来&#xff0c;"数据中台"这一概念逐渐为人所知&#xff0c;并迅速成为推动企业数据驱动转型的重要基石。数据中台不仅是集数据接入、管理、分析于一身的综合平台&#xff0c;更是企业实现数据资源集中管理、分析决策和业务创新的核心支撑。 一、数…

VRRP虚拟路由实验(华为)

思科设备参考&#xff1a;VRRP虚拟路由实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种网络协议&#xff0c;用于实现路由器冗余&#xff0c;提高网络可靠性和容错能力。VRRP允许多台路由器…

如何提高旋转花键运行稳定性?

现代化精密仪器设备中&#xff0c;精密仪器的稳定工作性能对于生产效率和产品质量至关重要&#xff0c;运行效率和精度是常见问题。旋转花键作为机械传动系统中的重要组成部分&#xff0c;其稳定性也是直接影响到机械装配的质量和使用寿命&#xff0c;那么我们应该如何提升旋转…

uniapp开发小程序,通过缓存的方式,判断页面只弹出一次弹窗通知

一、需求 在使用uniapp开发小程序时&#xff0c;在【个人中心页面】-点击【我的推广】按钮进入详情页面时&#xff0c;要求出现【会员协议通知】的弹窗&#xff0c;并且有【确认和取消】两个按钮&#xff0c; 如果点了【取消】按钮&#xff0c;直接退出该页面&#xff0c;并且…

如何在极狐GitLab 使用Docker 仓库功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何在[极狐GitLab…

Github Benefits 学生认证/学生包 新版申请指南

本教程适用于2024年之后的Github学生认证申请&#xff0c;因为现在的认证流程改变了很多&#xff0c;所以重新进行了总结这方面的指南。 目录 验证教育邮箱修改个人资料制作认证文件图片转换Base64提交验证 验证教育邮箱 进入Email settings&#xff0c;找到Add email address…

官网下载IDE插件并导入IDE

官网下载IDEA插件并导入IDEA 1. 下载插件2. 导入插件 1. 下载插件 地址&#xff1a;https://plugins.jetbrains.com/plugin/21068-codearts-snap/versions 说明&#xff1a;本次演示以IDEA软件为例 操作&#xff1a; 等待下载完成 2. 导入插件 点击File->setting->Pl…

HTML和markdown

总体情况 <p>在html的用处 在vscode中使用markdown [Markdown] 使用vscode开始Markdown写作之旅 - 知乎

STL库 —— list 的编写

目录 一、成员变量 ​编辑 二、push_back 函数 三、迭代器 iterator 3.1 iterator 结构体 3.2 begin() 与 end() 函数 3.3 iterator 运算符重载 3.4 -> 的重载 3.5 const_iterator 四、测试代码 五、修饰符成员 5.1 insert 函数 5.2 erase 函数 5.3 push 函数…