elementui tree组件父子联动细节处理

tree组件勾选某个子节点时返回父节点的集合

1. 使用el-tree组件

  
    
        {{data.name}}
    
  
  

    取 消
    确 定
  

2. 当不选择全部子节点时也返回携带父节点的集合

bindMenuAndRole(){
  let list = this.$refs.tree.getCheckedNodes(false,true).map(i => i.id)  // 返回携带父节点的集合
  this.request.post("/roleMenu/bindMenuAndRole/" + this.roleId,list).then(res => {
    if (res.code === '200') {
      this.$message.success(res.msg)
      this.menuVisible = false
    } else {
      this.$message.error(res.msg)
    }
  })
},

tree组件回显父节点和某个子节点

3. 根据前面的需求可以得出，当回显时会获取到父节点和某些子节点，但tree组件默认选中父节点时子节点全部选中，解决方法如下：

// 菜单回显  row为角色拥有的菜单ID集合  --  [2,5,6,9]
setValue(row){
  let _this = this;
  _this.$data.thisRefTree = setInterval(() =>{
    row.forEach((i) => {
      let node = _this.$refs.tree.getNode(i);
      if(node.isLeaf){
        _this.$refs.tree.setChecked(node, true);
      }
    });
    clearInterval(_this.$data.thisRefTree)
  },200)
},