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

【Vue3】element-plus中el-tree的递归处理赋值回显问题

目录

    • 一:先获取所有权限tree
    • 二:在获取所有该角色能有的权限tree
    • 三:递归处理勾选tree节点

由于项目是从0-1开始构建的
rbac都需要重新构建对接
所以涉及到了权限管理和菜单管理

一级菜单包含多个二级菜单

    若二级不全选,则一级显示 半选 状态若二级全选中,则一级显示 全选 状态

在下次进入编辑页面时,需要将当前选中租户的权限回显出来

说明:二级下面会有多个三级菜单,以此类推

整体思路很简单:初始化树 -> 处理 el-tree 回显 -> 递归处理所有层级菜单选中的id

不处理情况下
只要勾选一个子节点,回来接收到的父节点数据
会显示 ,会显示所有子节点数据
在这里插入图片描述

一:先获取所有权限tree

Template

<Form :rules="rules" @register="register"><template #menus><el-tree ref="treeRef" node-key="id" :data="menuTree" :props="defaultProps" @check-change="handleSelectionChange" show-checkbox /></template></Form>
  // 权限Treelet menuTree = ref<tree[]>([])const defaultProps = {label: 'name',children: 'subMenus'}const multipleSelection = ref()const treeRef = ref()const currentIds = ref()
  //获取菜单树const getMenus = async () => {const { data, status } = await roleApi.roleMenuTree()if (status === '200') {menuTree.value = dataif (props.currentRow) {console.log(props.currentRow.id, 'currentRow')getRoleMenus(props.currentRow.id)}}}

二:在获取所有该角色能有的权限tree

在这里插入图片描述

  //查看角色关联菜单const getRoleMenus = async (id: any) => {const { data, status } = await roleApi.roleMenuById(id)if (status === '200') {currentIds.value = []handleObj(data)nextTick(() => {currentIds.value.forEach((item: any) => {// 选中树,获取到树的节点,如果存在isLeaf,则设置回显const node = treeRef.value.getNode(item)if (node.isLeaf) {treeRef.value.setChecked(node, true)}})})}}

三:递归处理勾选tree节点

  // 递归处理勾选tree节点const handleObj = (data: any) => {data.forEach((item: any) => {currentIds.value.push(item.id)if (item.subMenus && item.subMenus.length) {handleObj(item.subMenus)}})}

处理后的效果
在这里插入图片描述

http://www.lryc.cn/news/862.html

相关文章:

  • C语言---宏
  • 算法导论—路径算法总结
  • 程序环境--翻译+执行
  • 微信小程序内部那些事
  • 这是从零在独自开开发,将是副业赚钱最好的平台!
  • Spring MVC 之获取参数(对象、JSON格式数据、URL地址参数、文件、Cookie)
  • 永磁同步电机中BEMF电阻的作用
  • JAVA练习45-二叉树的层序遍历
  • 超高精度PID调节器的特殊功能(3)——变送输出(转发)功能及其应用
  • 【C++】nullptr C++中的空指针(C++11)
  • 笔试题-2023-大疆-数字IC设计【纯净题目版】
  • Python dict字典方法完全攻略(全)
  • 用“AI“挑选一件智慧礼物
  • 【Spark分布式内存计算框架——Spark Core】4. RDD函数(下) 重分区函数、聚合函数
  • 智能工厂自动化设备如何将数据采集到物联网云平台上
  • SpringBoot整合Mybatis的核心原理
  • 滴滴一面:order by 调优10倍,思路是啥?
  • Vue框架学习篇(五)
  • (蓝桥杯 刷题全集)【备战(蓝桥杯)算法竞赛-第1天(基础算法-上 专题)】( 从头开始重新做题,记录备战竞赛路上的每一道题 )距离蓝桥杯还有75天
  • C++——继承那些事儿你真的知道吗?
  • leetcode 困难 —— N 皇后(简单递归)
  • AWS实战:Dynamodb到Redshift数据同步
  • 机器学习评估指标的十个常见面试问题
  • 常见的安全问题汇总 学习记录
  • 元宵晚会节目预告没有岳云鹏,是不敢透露还是另有隐情
  • 计算机视觉 吴恩达 week 10 卷积
  • JavaScript 函数定义
  • 设计模式:建造者模式教你创建复杂对象
  • 在C++中将引用转换为指针表示
  • PS快速入门系列