ELementUI 树形控件el-tree半选状态获取父级节点id，菜单权限管理

el-tree一般常用于权限菜单授权，权限菜单管理等，此处做个小结

应用场景：将选中的子节点的id和半选状态下的父级id传到一个新的数组里，作为参数后端用于菜单授权

后端数据结构：isCheck = 1 时，为选中状态，子节点isCheck=1时，父节点isCheck 也是1

问题：刚开始使用this.$refs.tree.getCheckedNodes()获取选中的值，此方法只能选中子节点的id，全选状态下这个方法才能获取到父节点的id,因此行不通

使用 this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys())就可以了

小结二：根据后台数据，回显rl-tree的选中状态，由于菜单权限需要部分节点选中，保留状态，因此必须回显

代码结构

 //终极大法半选情况下获取父级节点id  ：
 this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys())

  <div class="roletree">
                <div>
                  <el-scrollbar style="background-color: #fff;">
                    <el-tree
                      ref="leftTree"
                      class="tree-line"
                      node-key="id"
                      show-checkbox
                      :data="partMenuList"    //获取的属性列表
                      :props="defaultProps"   //自定义的对象，用于存放渲染数据字段
                      :default-checked-keys="array"   //默认勾选的节点的 key 的数组
                      :default-expand-all="true"         //默认状态下全部展开
                      @check-change="selectNodes">
                    </el-tree>
                  </el-scrollbar>
                  </div>
              </div>
<script>
export default{
    data(){
      return{  
           array: [],   //默认选中的节点，用于后端返回的值
           halfArray:[],  //不全选数组
           defaultProps:{       //自定义对象，绑定后端返回的值并渲染
               children: 'children',
               label: 'label',
            },
           empowerObj:{      //点击授权所需参数
                id:'',
               menuIds:[]    //用于存放选中的id
           },
           obj:{    //切换角色参数
                 id:''
          }

        }
      }，
      created() {
            this.getList()
           this.getRolerList()
      },
       methods:{
	 // 首次加载获取角色列表，并查询第一条角色下的菜单
      getRolerList(){
        getRole().then((hui)=>{
          this.rolerList = hui.data
          this.roleName = hui.data[0].name
          let porject = {
            id:hui.data[0].id
          }
          getMenuList(porject).then((res)=>{    //此处才是获取菜单el-tree的地方
            this.partMenuList = res.data          //后端返回的值链
            this.partMenuList.forEach((item)=>{   //循环遍历后端返回的数据，此处处理的是三层 el-tree结构，如果有更多层，只需多加几层forEach循环即可
                if(item.isCheck == 1){
                   var childrenLength = item.children.length
                   var chickLength = 0
                   item.children.forEach((item1)=>{
                       if(item1.isCheck == 1){   
                          chickLength++
                          var childrenLength1 = item1.children.length
                          var chickLength1 = 0
                          item1.children.forEach((item2)=>{
                              if(item2.isCheck == 1){
                                 chickLength1++
                                 this.array.push(item2.id)
                              }
                          })
                          if (childrenLength1 > chickLength1) {
                            this.halfArray.push(item1.id)
                            chickLength--
                          } else {
                            this.array.push(item1.id)
                          }
                       }
                   })
                         if (childrenLength > chickLength) {
                           this.halfArray.push(item.id)
                         } else {
                           this.array.push(item.id)
                    }
                }
            })
             this.array = [...new Set(this.array)]       //默认选中去重id
          })
        })
      },
     
     //点击切换角色，查询对应角色下的菜单tree
      btnRole(item,index){
        console.log(item,100000000)
        this.current = index
        this.roleName = item.name
        this.array = []
        this.halfArray = []
        // this.partMenuList = []
        this.empowerObj = {
          id:item.id,
          menuIds:[]
        }
        this.obj = {
          id:item.id
        }
        getMenuList(this.obj).then((res)=>{
          //console.log(222222,res)
          this.partMenuList = res.data
          this.partMenuList.forEach((item)=>{
              if(item.isCheck == 1){
                 var childrenLength = item.children.length
                 var chickLength = 0
                 item.children.forEach((item1)=>{
                     if(item1.isCheck == 1){
                        chickLength++
                        var childrenLength1 = item1.children.length
                        var chickLength1 = 0
                        item1.children.forEach((item2)=>{
                            if(item2.isCheck == 1){
                               chickLength1++
                               this.array.push(item2.id)
                            }
                        })
                        if (childrenLength1 > chickLength1) {
                          this.halfArray.push(item1.id)
                          chickLength--
                        } else {
                          this.array.push(item1.id)
                        }
                     }
                 })
                 if (childrenLength > chickLength) {
                   this.halfArray.push(item.id)
                 } else {
                   this.array.push(item.id)
                 }
              }
          })
          this.array = [...new Set(this.array)]
        })
      },
      //重点：获取选中的节点，包括半选状态下父级节点的id，并赋值一个新的数组作为参数，用于授权处理
       //el-tree选中的节点
      selectNodes(){
         //获取节点，此方法只可以获取选中的子节点id，和全选状态下的父级id                
         //var arrs =  this.$refs.leftTree.getCheckedNodes()
         
         var arrs =  this.$refs.leftTree.getCheckedKeys().concat(this.$refs.leftTree.getHalfCheckedKeys())
         console.log('选中的节点',arrs)
         this.empowerObj.menuIds = arrs
         console.log(555555555,this.empowerObj.menuIds)
      },
         //确认授权
      confirmEmpower(){
            console.log('授权参数',this.empowerObj)
            roleMenuAccredit(this.empowerObj).then((res)=>{
                if(res.status == 1){
                    this.$message({
                      message: '授权成功',
                      type: 'success'
                    });
                   getMenuList(this.obj).then((res)=>{
                   })
                }else{
                    this.$message({
                      message: '授权失败',
                      type: 'warning'
                    });
                }
            })
      }
    


       }
 }
</script>

点击授权所需参数，1 和 2 分别为半选状态下的父级id