How the ElementUI tree control gets the selected node and the parent node (even if it is not all selected)

the demand has changed. Previously, you only need to submit the id array of the selected leaf node, and then you can get it directly through the official api [getCheckedKeys]. Now it is required to also pass the id of the parent node.

get stuck. Many netizens have this kind of demand after watching Issues, but I don"t see a reliable method.

there is an idea: first get the id, of the child node through getCheckedKeys, then go to the data of tree to traverse one by one, take out the existing id for the parent node, and finally reorganize all the selected id to submit, but what if you encounter N-level? I can"t write.

Feb.26,2021

the official v2.2.1 version has provided access to semi-selected status node objects.
clipboard.png
:


this.tempKey === -666666 // key, tree. -sharp


https://github.com/daxiongYan...



elementUi getNode

node

this.$refs.tree.getNode(id


:this.$refs.tree.getNode(id).parent.data



getCheckedNodes getSelectedNodes
getCheckedAll

clipboard.png


getCheckedAll:function () {

 return this.flatState.filter(function (e) {
    if(e.node.indeterminate){
        return e.node.indeterminate
    }
    return e.node.checked
}).map(function (e) {
    return e.node
})

}

print e it will be easy to see the official marked application of the previous getCheckedNodes code can be written and finally
this.$refs.tree.getCheckedAll () will be able to get the parent object


finally solved
you find node_modules/element-ui/lib/element-ui.common.js
change if (node.checked) to if (node.checked | | node.indeterminate) in line 20106


the data bound by tree is a list, that comes out through the following function computed. When I save it, I get the parentId from this list

 function toTree(data, parent_id) {
    var tree = [];
    var temp;
    for (var i = 0; i < data.length; iPP) {
      if (data[i].parentId == parent_id) {
        var obj = data[i];
        temp = toTree(data, data[i].id);
        if (temp.length > 0) {
          obj.children = temp;
        }
        tree.push(obj);
      }
    }
    return tree;
  }
      

I got it myself. That's how I wrote it.

getPermissions() {
        let _this=this;
        let permissions=this.$refs.tree.getCheckedKeys();
        let ids=[];
        permissions.forEach(key=>{
          getParentId(key)
        })
        function getParentId(id) {
            let node=_this.list.find(item=>item.id==id)
            if(node.parentId==0){
              return
            }else{
              ids.push(node.parentId)
              getParentId(node.parentId)
            }
        }
        permissions=[...new Set([...permissions,...ids])]
        return permissions.join(',')
      },

it's not good to change the source code, so I used a stupid method. The idea of
is to get the selected code, traverse the whole tree, then add the semi-selected ones, and remove the semi-selected nodes when editing

.
//: data,nodekeynull node
export const handleUpdateCheckds = (tree, checkeds, isAdd = true, checkKey = 'no') => {
    let findHalfCheckds = (item, checkeds, result = new Set()) => {
        if (item.children) {
            let node = [...item.children];
            while (node.length) {
                let data = node.shift();
                if (!item.isRoot) {
                    if (isAdd && checkeds.includes(data[checkKey] || data) && !checkeds.includes(item[checkKey] || item)) {
                        result.add(item[checkKey] || item);
                    } else if (!isAdd && !checkeds.includes(data[checkKey] || data) && checkeds.includes(item[checkKey] || item)) {
                        result.add(item[checkKey] || item);
                    }
                }
                if (data.children && data.children.length > 0) {
                    node = node.concat(data.children);
                }
                findHalfCheckds(data, checkeds, result);
            }
        }
        return result;
    };
    let result,
        halfCheckds = [...findHalfCheckds({
            isRoot: true,
            children: tree
        }, checkeds)];
    if (isAdd) {  //
        result = [...new Set(checkeds.concat(halfCheckds))];
    } else {
        result = checkeds.filter(item => !halfCheckds.includes(item));
    }
    //console.log(halfCheckds);
    return result;
};

see one of this https://blog.csdn.net/sqlquan/article/details/84636595



you can write id with the background and pass it on according to the level
for example, use-to connect

grandfather id- parent id-id- subset id


I'm going to change the source code directly on this issue. Have you solved


excuse me, how to restore the original choice according to the selected key,? if you set it by modifying the source code, it should be wrong to directly set the acquired key data--


change the data source of the tree control after it is removed. Traversing treeSource adds the attribute parentIds: "id1,id2,."


to each node node.

I have an idea, and I have personally tested that we can get the parent node id
generally, the returned child node data data contains the parent id (parent_id), and the selected node can be obtained through the getCheckedNodes method of element, and the parent id can be obtained. How simple it is

treeNodes = this.$refs.tree.getCheckedNodes (true);
treeKeys = this.$refs.tree.getCheckedKeys ();

/ *

Child node id
* /
for (var i = 0; I < treeKeys.length-1; iPP) {

ids [I] = treeKeys [I];
}
/ *

Select the parent of the child node id
* /
for (var i = 0; I < treeNodes.length; iPP) {

ids.push (treeNodes [I] .parent _ id);
}
ids = JSON.stringify (ids);

Menu