当前位置: 首页 > news >正文

vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)

文章目录

  • 前言
  • 一、遇到的交互场景
      • el-tree 中 check-strictly 属性
  • 二、处理父级的半选中以及选中交互
      • el-tree
      • check,check-change 事件
      • 编辑进来,父级的半选状态处理
  • 总结


前言

在开发后台管理系统的时候,用户的权限控制是一个常见的需求。这里需要探讨下按钮的级别的权限控制,以及实现中使用element-plus tree 组件的使用细节。


一、遇到的交互场景

基于原有的基础上实现按钮级别的权限控制,原有的如下图每一个菜单都有一个唯一ID,PID(父级ID),现在需要扩展的功能,就是添加一个button按钮控制,其中主要的细节交互:

  1. 取消选中子级menu/button,父级不关联取消;
  2. 选中/取消父级catalog/menu,子级全部选中/取消;
  3. 选中/取消部分子级menu/button,父级关联半选中状态(indeterminate=true);

其中我用的是el-tree 组件,我用button:xxx业务按钮;这样的方式来命名,后端也给了区分类型的字段type:catalog(目录),menu(菜单),button(按钮)。

在这里插入图片描述

el-tree 中 check-strictly 属性

el-tree 中 check-strictly 属性,为了实现取消选中子级menu/button,父级不关联取消,这里check-strictly设置为true;设置后点击父级也不关联子级选中了,用户用起来不方便,这里就需要我们自己处理
在这里插入图片描述

二、处理父级的半选中以及选中交互

el-tree

 <el-treeref="treeRef":check-strictly="true":data="treeData"show-checkboxdefault-expand-allnode-key="id"highlight-current:default-checked-keys="variable.roleForm.featureIds":props="defaultProps"@check="hanleCheck"@check-change="checkChange"/>
const defaultProps = {children: 'children',label: function (treeData: any, treeNode: any) {return treeData?.name}
}

check,check-change 事件

这里主要用的事件 check,check-change
在这里插入图片描述

const hanleCheck = (data:any, node:any) => {console.log(data, node);// 获取当前节点是否被选中const isChecked = treeRef.value!.getNode(data).checked// 如果当前节点被选中,则遍历下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消if (isChecked) {// 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中data.children && data.children.length > 0 && setChildreChecked(data.children, true)} else {// 如果节点取消选中,则取消该节点下的子节点选中data.children && data.children.length > 0 && setChildreChecked(data.children, false)}function setChildreChecked(node:any, isChecked:boolean) {node.forEach((item:any) => {item.children && item.children.length > 0 && setChildreChecked(item.children, isChecked)// // 修改勾选状态treeRef.value!.setChecked(item.id, isChecked,false)})}
}const checkChange = (data, checked, indeterminate) => {// console.log(data, checked, indeterminate);// 选中全部子节点,父节点也默认选中,但是子节点再次取消勾选或者全部子节点取消勾选也不会影响父节点勾选状态let checkNode = treeRef.value!.getNode(data)//获取当前节点// 勾选部分子节点,父节点变为半选状态if (checkNode.parent && checkNode.parent.childNodes.some(ele => ele.checked)) {checkNode.parent.indeterminate = true}// 勾选全部子节点,父节点变为全选状态if (checkNode.parent && checkNode.parent.childNodes.every(ele => ele.checked)) {checkNode.parent.checked = truecheckNode.parent.indeterminate = false}// 如果取消所有第二节点的勾选状态,则第一层父节点也取消勾选if (checkNode.level == 2 && checkNode.parent.childNodes.every(ele => !ele.checked)) {checkNode.parent.checked = falsecheckNode.parent.indeterminate = false}
}

其中,上面用的

      treeRef.value!.setChecked(item.id, isChecked,false)

看文档说第三个属性是是否要递归,我觉得是设置了true后,应该帮我递归选中/取消关联的节点,但没有生效,所以还是自己递归下;(有大佬能指出是我的用法有问题吗?劳烦指出)
在这里插入图片描述

编辑进来,父级的半选状态处理

上述方法实现后,我们就可以实现上述交互了,但这里要注意的一点,就是点击编辑进入的,父级的半选状态没有选中,也就是说 checkNode.parent.indeterminate 这个没有被设置为true;下面打个补丁。

const editRole = async (row: any) => {const { permissionIds} = await detailApi({ id: row.id })await nextTick()setCheckedKeys(permissionIds)  // 返回用户的权限id后,根据id选中树节点permissionIds.forEach((id:any) => {const nodeData = treeRef.value!.getNode(id)  // 根据权限id,获取每个选中的树节点console.log('nodeData',nodeData)console.log('nodeData.parent?.id',nodeData.parent?.id)// 反显,上面setCheckedKeys后,如果父级没有选中,则把半选状态设置trueif(nodeData?.parent?.id != 0 &&  !nodeData?.parent?.checked){nodeData.parent.indeterminate = true}});
}

总结

后台管理系统常见的权限控制需求,这里讲button实现交互细节处理,

  1. 取消选中子级menu/button,父级不关联取消;
  2. 选中/取消父级catalog/menu,子级全部选中/取消;
  3. 选中/取消部分子级menu/button,父级关联半选中状态(indeterminate=true);
    下篇再补上button 的根据权限控制显示,用vue3 的指令实现,谢谢关注

相关文章:

vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)

文章目录 前言一、遇到的交互场景el-tree 中 check-strictly 属性 二、处理父级的半选中以及选中交互el-treecheck&#xff0c;check-change 事件编辑进来&#xff0c;父级的半选状态处理 总结 前言 在开发后台管理系统的时候&#xff0c;用户的权限控制是一个常见的需求。这里…...

js中事件委托和事件绑定之间的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 事件绑定&#xff08;Event Binding&#xff09;⭐事件委托&#xff08;Event Delegation&#xff09;⭐ 选择事件绑定或事件委托⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本…...

Android 11.0 系统system模块开启禁用adb push和adb pull传输文件功能

1.使用场景 在进行11.0的系统定制化开发中,在一些产品中由于一些开发的功能比较重要,防止技术点外泄在出货产品中,禁用 adb pull 和adb push等命令 来获取系统system下的jar 和apk 等文件,所以需要禁用这些命令 2.系统system模块开启禁用adb push和adb pull传输文件功能的…...

实战经验分享:如何通过HTTP代理解决频繁封IP问题

在网络爬虫和数据采集等应用中&#xff0c;频繁遇到目标网站封锁或限制IP的情况是非常常见的。为了解决这个问题&#xff0c;使用HTTP代理是一种有效的方法。本文将与您分享一些实战经验&#xff0c;帮助您通过HTTP代理解决频繁封IP问题&#xff0c;确保您的数据采集工作顺利进…...

通讯网关软件001——利用CommGate X2Access-U实现OPC UA数据转储Access

本文介绍利用CommGate X2ACCESS-U实现从OPC UA Server读取数据并同步转储至ACCESS数据库。CommGate X2ACCESS-U是宁波科安网信开发的网关软件&#xff0c;软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示&#xff0c;实现从OPC UA Server实时读取…...

Mybatis sql参数自动填充

问题描述 在日常开发中&#xff0c;经常会遇到Mybatis sql语句的操作问题&#xff0c;由于Mybatis实现sql的动态拼接&#xff0c;开发过程中&#xff0c;为了验证sql是否书写正确&#xff0c;通常需要获取的控制台打印的sql语句来检查是否拼接正确。如下图所示&#xff1a; 那…...

亚马逊云科技面向游戏运营活动的AI生图解决方案

随着Stable Diffusion等AI生图方案逐步普及&#xff0c;越来越多的场景被开发和落地。其中面向游戏C端玩家的AI生图营销活动场景正在被逐步验证&#xff1a;在某个游戏社区中&#xff0c;玩家一键从手机上传一张照片&#xff0c;AI会将自动识别该照片中的元素并替换成游戏中相应…...

腾讯mini项目-【指标监控服务重构】2023-07-30

今日已办 调研 CPU & Memory Cadivisor &#xff23;adivisor -> Prometheus -> (Grafana / SigNoz Web) google/cadvisor: Analyzes resource usage and performance characteristics of running containers. (github.com) services:cadvisor:image: gcr.io/ca…...

Windows 下 MySQL 8.1 图形化界面安装、配置详解

首先我们下载安装包 官方下载链接&#xff1a; MySQL :: Begin Your Download 网盘链接: https://pan.baidu.com/s/1FOew6-93XpknB-bYDhDYPw 提取码: brys 外网下载慢的同学可以使用上述网盘链接 下载完成后我们双击安装包即可进入安装界面 点击next 勾选同意协议&#…...

WebRTC 源码 编译 iOS端

1. 获取依赖工具 首先&#xff0c;确保你已经安装了以下工具&#xff1a; GitDepot ToolsXcode&#xff08;确保已安装命令行工具&#xff09; 2. 下载 depot_tools 使用 git 克隆 depot_tools 并将其添加到你的 PATH 中&#xff1a; /path/to/depot_tools 替换为自己的路径…...

Python编程指南:利用HTTP和HTTPS适配器实现智能路由

嗨&#xff0c;爬虫大佬们&#xff01;今天我要为大家分享一篇关于如何利用HTTP和HTTPS适配器来实现智能路由的Python编程指南。在现代互联网应用中&#xff0c;路由功能起着至关重要的作用&#xff0c;而利用Python编程语言实现智能路由则可以为我们的应用带来更高的灵活性和性…...

MySQL 权限分配

有时候&#xff0c;您需要查看某个用户被授予的权限以便复核。 MySQL 允许您使用 SHOW GRANTS 语句来显示分配给用户帐户或角色的权限。 MySQL SHOW GRANTS 语句介绍 以下是 SHOW GRANTS 语句的基本语法&#xff1a; SHOW GRANTS [FOR {user | role} [USING role [, role] .…...

基于PHP的医药博客管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的医药博客管理系统 一 介绍 此医药博客系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。用户可注册登录&#xff0c;查看/评论/搜索博客&#xff0c;建议留言。管理员可对用户&a…...

spark SQLQueryTestSuite sql 自动化测试用例

把SQL 添加到自动化测试用例。 ./sql/core/src/test/resources/sql-tests/inputs 目录存放原始的SQL. ./sql/core/src/test/resources/sql-tests/results存放SQL的执行结果。在执行测试时&#xff0c;根据最新生成的结果和 ./sql/core/src/test/resources/sql-tests/results 进…...

Taro小程序隐私协议开发指南填坑

一. 配置文件app.config.js export default {...__usePrivacyCheck__: true,... }二. 开发者工具基础库修改 原因&#xff1a;从基础库 2.32.3 开始支持 修改路径&#xff1a;详情->本地设置->调试基础库 三. 用户隐私保护指引更新 修改路径&#xff1a;mp后台->设…...

iOS App上传到苹果应用市场构建版本的图文教程

使用hbuilderx的h5或uniapp框架写的前端&#xff0c;进行云打包ios应用&#xff0c;会生成一个ipa后缀的应用文件。这个文件是没有办法像安卓应用那样直接安装在手机上面的。需要上架到苹果应用商店&#xff0c;用户才能下载安装使用。 因此&#xff0c;我们这篇文章讲详细介绍…...

paddle框架的使用

Paddle是由百度开发的深度学习框架&#xff0c;支持声明式和命令式编程风格。它还支持深度神经网络的超大规模训练和神经架构的自动设计。您可以使用 Paddle 构建用于训练的神经网络模型&#xff0c;具体步骤如下&#xff1a; 导入桨模块和其他必要的模块&#xff0c;如numpy&…...

Spring Boot + Vue的网上商城之基于element ui后台管理系统搭建

Spring Boot Vue的网上商城之基于element ui后台管理系统搭建 在本篇博客中&#xff0c;我们将使用Spring Boot和Vue来构建一个基于element ui的后台管理系统。我们将详细介绍每个步骤&#xff0c;并提供完整的代码示例&#xff0c;包括配置文件和组件。此外&#xff0c;我们…...

Linux基础入门

一、操作系统安装方法 1、使用u盘安装 工具&#xff08;前提条件&#xff09;&#xff1a; <1>u盘 <2>镜像文件iso/msdn.itellyou.cn <3>把u盘做成PE&#xff1a;大白菜/老毛桃/winPE/软碟通/ultralSO 设置BIOS&#xff1a;通过u盘启动 安装系统&…...

Unity工具——LightTransition(光照过渡)

需求描述 在游戏中&#xff0c;开发者为了让玩家更直接地看到待拾取的物品从而为其添加一种闪烁效果&#xff0c;或者模拟现实中闪烁的灯光效果&#xff0c;我能够想到的一种方案则是通过控制光照强度来实现&#xff0c;那么本篇文章我们就尝试通过这个方案来实现一下&#xff…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...