el-tree 父子关联情况下，对获取的keys自动处理，某级父权限的子权限全选则只保留该级父权限ID，否则舍弃父权限ID

原创

已于 2023-08-14 19:00:49 修改 · 690 阅读

标签

#vue.js #elementui #前端

于 2023-06-06 00:09:27 首次发布

文章描述了一个在项目中处理权限树的需求，当用户勾选权限后，需要向后端发送对应的权限ID数组。如果勾选父权限，则默认包含所有子权限，仅发送父ID；如果部分勾选子权限，则保留选择的子权限ID而不发送父ID。文章提供了实现这一功能的JavaScript代码，包括获取节点、过滤和扁平化处理等步骤。

项目里遇到的一个需求：在权限树勾选权限后，向后端发送对应的权限id数组

后端对id有这样的要求：

勾选了父权限则默认获取其所有子权限，故该情况下只发送该父权限id，而不要其子权限id
若勾选了某父权限的部分子权限（数量 < parentPermissions.children.length），则不过滤它们的父权限id，只保留选择的其子权限的id

大概就是这样（图中数据都是测试使用随便设置的，有些没逻辑）

在这里插入图片描述
然后要的结果：

处理方法如下:

两个参数：

gottenNodes：通过el-tree的this.$refs.tree.getCheckedNodes()获得，是选择的节点的node数组
checkId: 通过el-tree的this.$refs.tree.getCheckedKeys()获得，是选择的节点的key数组，也是我们需要过滤的数组

import store from '@/store'
/**
 * 用于配置角色权限，根据接口要求，需要过滤掉el-tree返回的父级节点
 * 可以直接利用它的props让父子不严格关联，但是我不太想要那种情况下的表现效果
 * @param gottenNodes el-tree返回的被选择的节点数组， 这个数组是一维的
 * @param checkedId el-tree 返回的被选择的初始的id数组，这里面可能存在父子id都在的情况
 * @return 从nodes中提取出的parentId对象数组，每个parent对象含有: 父权限id和其children的id数组
 */
export function filterParentId(gottenNodes, checkedId){
   
   
  let pId =[]
  
  // 1、获取nodes中的所有的parentId和其children的id数组，加入集合
  let nodeKids = []
  for(let i = 0; i < gottenNodes.length; i++){
   
   
    if(gottenNodes[i].hasChildren){
   
   
      nodeKids = store.getters.permissionsFalt.find((p) => p.id