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

项目里遇到的一个需求：在权限树勾选权限后，向后端发送对应的权限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 == gottenNodes[i].id).children.map((child) => { return child.id })
      pId.push({
	  	id: gottenNodes[i].id,
	  	children: nodeKids
	  })
    }

    nodeKids = []
  }
  // 借助Set去重并深拷贝
  pId = [...new Set( pId.map(p => JSON.stringify(p)) )].map(ever => JSON.parse(ever))

  
  // 2、然后进行过滤，过滤的思想目前是这样:
  //    出于这样的业务需求: 选择了父权限，那么默认拥有其所有子权限
  //                       如果选择了子权限（无children），那么该子权限就是权限树一支的末端，不再传该子权限的父权限
  //    于是得到结论: 当某一父权限被选中，且checkedId中它的子权限数量少于它的children.length，那么舍弃父权限id
  //                                    如果等于children.length，那么舍弃全部子权限，保留父权限

  // 3、遍历pId和初始权限数组，开始过滤
  return checkAndFilter(pId, checkedId)
}

/**
 * 过滤权限id
 * @param pId 处理得到的父亲权限信息
 * @param checkedId el-tree返回的源数组
 * @return 过滤结果
 */
function checkAndFilter(pId, checkedId){
  let cnt = 0, temp = []
  //需要深拷贝
  let copy = JSON.parse(JSON.stringify(checkedId))
  
  for(let i = 0; i < pId.length; i++){
    if(!pId[i].children.length){
      continue
    }

    copy.forEach((item) => {
      if(pId[i].children.includes(item)){
        cnt++
        temp.push(item)
      }
    })
    if(!cnt){ 
      continue
    }else if(cnt < pId[i].children.length){
      checkedId.splice(checkedId.indexOf(pId[i].id), 1)
    }else{
      temp.forEach((t) => {
        checkedId.splice(checkedId.indexOf(t), 1)
      })
    }

    // 已经遍历过的数据移出数组
    cnt = 0
    if(temp != []){
      temp.forEach((t) => {
        copy.splice(copy.indexOf(t), 1)
      })
      temp = []
    }
  }
  return checkedId
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

其中使用了扁平化处理后的树状数组permissionsFalt，避免递归。扁平化的API如下：

/**
 * 树状数组扁平化
 * @param arr 需要扁平化的树状数组
 * @return 处理后的扁平化数组
 */
export function faltten(arr){
    var res = []
    var out = []

    res = res.concat(arr)
    while(res.length){
        var fir = res.shift()
        if(fir.children.length){
            res = res.concat(fir.children)
            //delete fir.children
        }
        out.push(fir)
    }

    return out
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21