vue-element 权限管理数据的处理，简单实用。

Posted 2023-03-15

参考技术A

1,首先获取到后端返回给我们的权限数据,数据大概长这么个样子。

2,要渲染到element的树形结构上的话，要做一层递归处理，让它形成树形结构。这个也可以不用递归，我看他们用map这个属性，也能很好的处理。具体做法如下：

这个数据渲染好以后，是长这样的，也就符合了我们el-tree组件所需的数据结构。

3，现在管理员开始在管理界面开始做权限管理操作。如图所示：

这样的话返回给后端的是一个id组成的数组， data=[1,4,10] 这就是你返回给后端的数据 ，还没完接下来该复现了。

4,现在后端给数据返回给你，他是按照刚才你给的数据返回过来的。然后添加上check属性，这个也是你们约定，数据大概就长这样：

你可能还在想不错，不错。还不用递归，循环就给数据拿了。当你拿到所有的数组check为true的数据组成的数组treelist,然后 this.$refs.tree.setCheckedKeys(this.treelist) 上去时，已经不符合要求了，因为父集全选，子集就会全选。他会变成这样：

5，这样肯定不行，我们要再做一次数据处理，让它符合要求。1， 要给数据再次递归成树形结构 ，还是上面的方法给数据递归成树形结构。2，遍历这个树形结构，判断父集的子集是否全部为true，如果不是就就让他的check属性设置为false，

这里说明一下。this.state 这个变量你要自己设置一下或者全局变量都行，反正要设置一下，设置为true。首先我们给递归好的树形结构放在 traveData 这个函数里面这个函数会递归一遍我们的数据，主要是判断
item.check = item.children.length > 0 ? this.getchildStatus(item.children) : item.check
这里是判断他有没有子集，没有的话就是ok，那么check的值就是合理的，如果他有子集但是它的check为true这就很不合理，因为我们不知道他的子集到底是不是都是选了的，也就是check为true，所以要做一层碰断，判断他的子集是否全为true，只要他的子集有一个不为true，那它就不能为true this.getchildStatus(item.children) 所以这里又做了一层，遍历他的所有子集。判断check的值。ok做到这里我们大概也差不多了。拿到 return data 的值我们还要做一次数据的递归，

6,至此，我们已经拿到了 this.treelist的值我们只要

这样就可以把我们的树形结构又从新渲染好了。数据用的都是模拟数据，但是和业务场景的数据其实差别不大，只要按照这个流程就ok了。不管是element，antd，我觉得这个全选和半选感觉还可以优化下。不是真的挺绕的。