Vue-treeselect and el-tree click on the node to get the data of the superior node

el-tree, both click and right click have a parameter, which is the Node corresponding to the node

insert image description here
Print this Node, as follows:

    @node-contextmenu="rightClick"
    // 节点右击事件 */
    rightClick(MouseEvent, object, Node, element) {
    
    
      console.log(Node, "Node"); 
    },

insert image description here
expand parent
insert image description here

This parent is the parent node, and the parent node also contains its own parent node. If there is no parent node, it is
quite simple to return null el-tree to get the parent node. The inside of the tree component has been returned to you, just get it directly

Vue-treeselect obtains the parent node, and there is no direct method of obtaining it in the document. Let me talk about my own implementation method here.

 @select="(node) => treeHandleSelect(node)"
 
  treeHandleSelect(node, e) {
    
      
      // 获取节点上一节点
      //this.expendTree树数据源,node.pid当前节点的父id,this.dealPartytree处理数据的方法
      const obj = this.dealPartytree(this.expendTree, node.pid);
      //obj就是处理完后返的父节点,然后直接拿自己需要的东西即可
      this.partymember.branch = obj.name;
      this.partymember.branchId = obj.id;
   
    },

Pass in the tree data source and the parent id of the node

    // 获取节点上一节点
    dealPartytree(arr, id) {
    
    
      let obj = {
    
    };
      const dep = (data, nodeId) => {
    
    
      //循环树数据源,用当前项的id和父id对比,相同就赋值,不相同就递归,相当于遍历了整棵树
      
        for (let v = 0; v < data.length; v++) {
    
    
          if (data[v].id === nodeId) {
    
    
            obj = data[v];
          } else if (data[v].children) {
    
    
            dep(data[v].children, nodeId);
          }
        }
        return obj;
      };
      obj = dep(arr, id);
      return obj;
    },

//Comparing the id of the current item with the parent id is because the parent id of the current item is the id of the parent node, which is associated with the id of the parent node
insert image description here

If you don't understand, welcome to communicate

おすすめ

転載: blog.csdn.net/weixin_49668076/article/details/127459682