解决树形结构菜单勾选，半勾选显示问题

问题：对菜单进行部分勾选，其中后台需要将半选的子节点保存到后台，但是在获取反选的时候，因为父节点中存在，所以需要将父节点进行排除。

1.需要满足如下这种情况。

1.解决的问题有：将半选的节点也获取到

let checkedList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());

下面是我的业务代码，将所有节点的id存储在以逗号隔开的字符串 authIds（例如authIds = '201,20203,20304,204,2,202,203'）

  var authIds = "";
      for (let index = 0; index < checkedList.length; index++) {
        if (index == checkedList.length - 1) {
          authIds += checkedList[index].id;
        }else{
          authIds += checkedList[index].id + ",";
        }
      }

2.接下来进行树形菜单反显的问题，(参考:element-ui tree) 

 element 官网中的demo：

 解决反显的时候按照保存选择的半选和全选，所以需要将获得的节点中将父节点进行删除，然后将父节点存储（default-expanded-keys）

 创建一个 mainMenuList：[](选中父节点菜单数组)

创建一个  userMenuList：[](选中叶子节点菜单数组)

创建一个   roledata :[]    完整的整棵树

 roledata的数据格式：

 调用方法：this.findAllChildren(this.roledata);

  //遍历树形然后获取到对父节点进行移除，使用子节点，而且将父节点加入到mainMenuList
    findAllChildren(data) {
      data.forEach((item, index) => {
        if(item.children.length !== 0) {
          for (let i = 0; i < this.userMenuList.length; i++) {
            if (item.id == Number(this.userMenuList[i])) {
              this.mainMenuList.push(this.userMenuList[i])
              this.userMenuList.splice(i, 1);
              console.log(this.userMenuList);
            }
          }
          this.findAllChildren(item.children);
        }
      })
    },

 

        
        
          
            保存
            取消
          
        

这样就可以解决反显的问题啦，希望大家可以多多指出问题，一起学习！