element Tree 树形控件 父节点默认勾选,子节点的数据全部选中

需求,后台权限控制 , 前端传递给后端勾选中的 节点id , 后端返回树状结构数据.每个对象中有一个字段来标识是否勾选,由于传给后端的时候也需要把父节点的id传递过去.等到下次弹窗打开需要默认勾选中已经绑定过得权限节点,但是遍历后端数据,我把父节点的id 和 按钮权限的 id 都存入到一个数组中,导致组件接收到父级节点的id时,下面的子节点全部勾选.​​​​​

比如就单勾选了 二级 2-1  但是默认显示的时候,存在父节点id ,就会导致父节点下面的元素全部选中.

但是查了好多方法,自己不会用,只能用了最笨的方法 

这个默认勾选的方法

// 获取默认的勾选的 的列表 按钮 id
    /**
     * 1.修改思路, 从接口返回的数据中 获取到 selected为true的下拉菜单,把下拉菜单的id 存到truelist中 
     * 2.然后下拉菜单中 存在 菜单 然后吧selected为true的菜单 也存入到 truelist中
     * 3.然后遍历菜单下的按钮 selected 为 true的 按钮 id 存入到 childrendids中 这个是所有勾选的按钮id
     * 4.如果点击了编辑,但是没有勾选 按钮, 有个标识 ischeck_true 这个是 点击选中框触发时间后状态更改为 true,一旦勾选,truelist中的数据就会改变
     * 会把勾选中的 下拉菜单id 和 菜单id 还有 按钮id 都存入到 truelist这个数组中 ,就直接提交这个数组 ,其他 childrendids 数组提交后默认为空
     * 5.如果没有勾选中,提交的时候判断ischeck_true 时候是 false 就是没有勾选状态,就把 原先默认勾选中的 truelist 和 childrendids 提交
     * 6.如果nav导航栏 有存在 菜单 而不是下拉菜单 的时候 就需要判断 此二级中的children.length === 0 ,就是表示这是菜单,把按钮权限存放到  childrendids中
     */
    gettruelist(data){
      // console.log('data',data);
      for(let i in data){
        //selected === true 就是默认选中
        if(data[i].selected === true)
        {
          this.truelist.push(data[i].id) //添加下拉菜单id
          for(let k in data[i].children){
            console.log('data[i].children[k]',data[i].children[k]);
              //如果第一级是菜单
              if(data[i].children[k].selected === true &&                   data[i].children[k].children.length === 0){
                this.childrenids.push(data[i].children[k].id) //添加菜单id
              }else if(data[i].children[k].selected === true && data[i].children[k].children.length !== 0){
                //如果是第一级是下拉菜单
                console.log('data[i].children[k]',data[i].children[k]);
                this.truelist.push(data[i].children[k].id) //添加菜单id
                for(let l in data[i].children[k].children){
                     //一级按钮
                      if(data[i].children[k].children[l].selected === true && data[i].children[k].children[l].children.length === 0 ){
                          console.log('子节点',data[i].children[k].children[l]);
                          this.childrenids.push(data[i].children[k].children[l].id)
                      }else  if
                      //二级按钮 更多操作
                      ( data[i].children[k].children[l].selected === true && data[i].children[k].children[l].children.length !== 0){
                        this.truelist.push(data[i].children[k].children[l].id)
                        console.log('子节点2',data[i].children[k].children[l]);
                       //循环二级按钮
                       for(let s in data[i].children[k].children[l].children)
                            if(data[i].children[k].children[l].children[s].selected === true){
                                console.log('二级按钮',data[i].children[k].children[l].children[s]);
                                this.childrenids.push(data[i].children[k].children[l].children[s].id)
                              }
                      }
                  }
              }
          }
        }
      }
    },

下拉菜单

菜单

 

然这个是获取到角色的权限数据的时候调用这个方法

//获取该角色的信息
    getrole(data){
      this.$axios.get('地址',{
        params:{
          id:data
        }
      }).then(res=>{
        console.log('res',res);
        let data = res.data.data
        let permissions = data.permissions
        //第一次 没有配置过 data_permission 显示null 就默认个人数据
        if(data.role.data_permission === null){
           this.radio = 1
        }else{
          this.radio = data.role.data_permission.data_permission_type
        }
        //把改用户的列表权限 传过去,然后找到 select 为true 的 保存ID 做默认选择
        this.gettruelist(permissions)
        console.log('childrendids',this.childrenids);
        console.log('truelist',this.truelist);
        this.truelist = [...this.truelist] //这是选中的菜单的id 默认选中时不能添加进去,否则菜单里面的按钮全部选中
        this.childrenids = [...this.childrenids]//这是只显示点击的按钮id
      })
    },

这个是data中定义的变量

//树状结构默认选中的数据
        truelist:[],
        //子节点的默认选中数据
        childrenids:[],
        //树状提交的数据:
        treelist:[],
        //用户点击了勾选  默认false 没勾选 提交的时候需要判断是否勾选
        istree_click:false,

附上点击勾选触发的方法

 //节点选中状态发生变化时的回调
    handleCheckChange(data, checked, indeterminate) {

      //6.25点击了按钮的标识
      this.istree_click = true 

      console.log('data',data);
      console.log('checked',checked);
      console.log('indeterminate',indeterminate);
      let ids = checked.halfCheckedKeys.concat(checked.checkedKeys)
      console.log('ids',ids);
      this.treelist = ids
      console.log('this.treelist',this.treelist);
    },

然后提交的时候需要判断 用户是否点击勾选的操作

//  保存按钮
    submitForm(){
        let data = []
        //需要判断打开弹窗的时候是否点击了选项,如果点击了选项就 提交 treelist 这个是点击了选项重新赋值过后的包括了菜单id和按钮id
        if(this.istree_click === true){
          data = this.treelist
        }else{
          //这是没点击勾选按钮 ,那就把最开始 定义的 菜单id 和 按钮id 合并
          console.log('this.treelist',this.truelist);
          console.log('this.childrenids',this.childrenids);
          this.treelist = this.truelist.concat(this.childrenids)
          data = this.treelist
          console.log('原来的权限',data);
        }

        this.$axios.post('地址',{
           id:this.roleid, //角色id
           data_permission_type :this.radio,//数据权限类型
           permissions:data//权限ID数组
        }).then(res=>{
           this.$message({
            type:'success',
            message:res.data.message
           })
           this.openpower = false //弹窗
           this.treelist = [] // 提交数据
           this.istree_click = false //是否勾选
           this.childrenids = [] //默认按钮id
           this.truelist = [] //默认菜单id
        })
    },