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

获取数据

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

 [{
            id: 1,
            label: '一级 1',
            pid: 0,
        }, {
            id: 4,
            pid: 1,
            label: '二级 1-1',
        }, {
            pid: 4,
            id: 9,
            label: '三级 1-1-1'
        }, {
            pid: 4,
            id: 10,
            label: '三级 1-1-2'
        }]

处理数据

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

function traveTree(data,pid){
            let tree=[]
            data.forEach(item => {
                 if(item.pid==pid){
                     tree.push({
                         id:item.id,
                         pid:pid,
                         children:traveTree(data,item.id)
                     })
                 }
            });
        return tree
        }
let flatData;//假设这个就是后端传给你的data
let treeData=traveTree(flatData,0)// 0是因为没有父节点的pid为0，这个可以和后端约定。

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

1605800917(1).png

逻辑操作

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

1605801192(1).jpg
很不巧，他做了让你最繁琐的一种处理方式，一般这种情况下，后端是要求给半选和全选的数据都返回给他没办法，我们只好给半选和全选的都给他。api如下：

      const checkKeys = this.$refs.tree.getCheckedKeys()
      const checkhalfkeys = this.$refs.tree.getHalfCheckedKeys()

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

复现处理

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

let datas = [{
            id: 1,
            label: '一级 1',
            pid: 0,
            check:true,
        }, {
            id: 4,
            pid: 1,
            label: '二级 1-1',
            check:true,
        }, {
            pid: 4,
            id: 9,
            label: '三级 1-1-1',
            check:false,
        }, {
            pid: 4,
            id: 10,
            label: '三级 1-1-2',
            check:true,
        }]

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

1605802260(1).jpg

复现数据再处理

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

 // 循环判断
    getchildStatus(data){
      data.forEach(item => {
        if (item.checked == false){
          this.state = false
        }
        if (item.children){
          this.getchildStatus(item.children)
        }
      })

      return this.state
    },
 // 遍历数据
    traveData(data){
      data.forEach(item => {
        item.check = item.children.length > 0 ? this.getchildStatus(item.children) : item.check
        if (item.children){
          this.traveData(item.children)
        }
      })
      return data
    },

这里说明一下。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的值我们还要做一次数据的递归，

 // 遍历id
    traveId(data){
      data.forEach(item => {
        if (item.checked){
          this.treelist.push(item.id)
        }
        if (item.children){
          this.traveId(item.children)
        }
      })
    },

结尾

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

this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(this.treelist)
          })

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