记录开发中element树形控件数据应用在页面上的相关问题

小半 • 2023年8月14日上午9:49 • 前端开发 • 阅读 273

业务场景

　　根据后台返回数据生成角色权限的树形结构。获取节点数据后，当父节点被勾选时，所有的子节点全部被勾选，而实际上后台并没有返回当前父节点的所有子节点的ID，所以应该只有部分子节点被勾选。

下面第一张图是一开始填充数据后的效果，而第二张图是真正想要的效果，

解决方案

这里试过在 el-tree 上增加 :check-strictly=”true” 确实也出现了右图的效果，但缺点是此时想全选，点击父节点的复选框，对应子节点复选框不会被勾上，所以此方案排除。

也试过用官方提供的 setChecked(data , false) 也未生效，这里不知道为啥没生效，参数和前提条件都有按照文档写好。

最后想的解决办法是：对数据进行过滤，选择没有子菜单的菜单ID传给树形控件，那么相应的子菜单的父节点也会半勾选上，就实现了上面右图的效果

以下是后台返回某个角色拥有的菜单ID列表和所有的菜单列表，都是一维数组：

首先将菜单扁平化数据转化为树状结构，这里核心是如果一个节点有父节点menuParentId，则为他的父节点创造一个children数组包含他，依次遍历；否则为祖先节点。

  buildTree2(list){
    let temp = {};
    let tree = [];
    for(let i in list){
      temp[list[i].menuitemId] = list[i];
    }
    for(let i in temp){
      if(temp[i].menuParentId) {
        if(!temp[temp[i].menuParentId].children) {
          temp[temp[i].menuParentId].children = []
        }
        temp[temp[i].menuParentId].children.push(temp[i]);
      } else {
        tree.push(temp[i]);
      }
    }
    return tree;
  }
  this.data2 = util.buildTree2(data.data.menuList)

其次从树状结构数据中筛选出没有子菜单的ID数组：

findNochild(arr){
  arr.forEach(element => {
  　　if(!element.children){
      　　this.menuitemIdList.push(element.menuitemId)
      }else{
          this.findNochild(element.children)
      }
  });
},
  this.findNochild(this.data2)//筛选出没子菜单的数组
  
　let tempList2 = []
  let tempList3 = []
  tempList.forEach(element => {
    tempList2.push(element.menuitemId) //后台返回的ID数组
  });
  tempList2.forEach(element => { //取相同的元素；
   if(this.menuitemIdList.indexOf(element)>-1){
     tempList3.push(element)
    }
  });
  this.$refs.tree.setCheckedKeys(tempList3);

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159680.html

记录开发中element树形控件数据应用在页面上的相关问题

相关推荐