Element UI’s Cascader cascading selector component needs an array of values when it is edited, whereas our API normally gives data to a single value. Two solutions:

  1. Convince the backend to give it to ARR.
  2. Get a cascading array based on the given value.

Just solved the problem these two days.

Write a method as follows:


function getTreeDeepArr(key, treeData) {

    let arr = []; // An array to operate on recursively
    let returnArr = []; // An array of results
    let depth = 0; // Define the global hierarchy
    // Define a recursive function
    function childrenEach(childrenData, depthN) {

        for (var j = 0; j < childrenData.length; j++) {

            depth = depthN; // Assign the execution level to the global level

            arr[depthN] = (childrenData[j].id);
            
            if (childrenData[j].id == key) {

                // returnArr = arr; // This assignment does not work because it has a pointer relation
                returnArr = arr.slice(0, depthN+1); // Truncate and save the currently matched array into the result array,
                break

            } else {

                if (childrenData[j].children) {

                    depth ++;
                    childrenEach(childrenData[j].children, depth); }}}return returnArr;
    }
    return childrenEach(treeData, depth);
}
/ / the result:
// console.log(getTreeDeepArr(1, treeData)); / / [1]
// console.log(getTreeDeepArr(3, treeData)); / / [1, 3]
// console.log(getTreeDeepArr(5, treeData)); / / [1, 4, 5]
var treeData = [{
    id: 1,
    children: [{
        id: 3
    },{
        id: 4,
        children: [{
            id: 5,
            children: [{
                id: 6
            },
            {
                id: 8
            }]
        }]
    },{
        id: 7
    },{
        id: 12,
        children: [{
            id: 13
        }]
    }]
},{
    id: 2,
    children: [{
        id: 9,
        children: [{
            id: 10
        }]
    }]
},{
    id: 11
}];

/ / structure:
// 
/ / 1-3
// -- 4 -- 5 -- 6
/ / -- - 8
/ / - 7
// 2 -- 9 -- 10
/ / 11
Copy the code

The full HTML Demo is as follows:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<pre>
    / / structure:
// 
/ / 1-3
// -- 4 -- 5 -- 6
/ / -- - 8
/ / - 7
// -- 12 -- 13
// 2 -- 9 -- 10
/ / 11
// Get the node and its parent relationship
/ / 0 to 1
/ / 1 3
/ / 1 4
/ / 2, 5
/ / 3 6
/ / 3 8
/ / 1 to 7
/ / 1 12
/ / 2, 13
/ / 0 2
/ / 1 9
10 / / 2
/ / 0 11
</pre>
    <input type="number" id="input">
    <a href="javascript:;" onclick="getArr()"</a> <div id="result"</div> <script>// get the tree depth relation array
// In this example, treeData,
// Expect the following results:
// console.log(getTreeDeepArr(1, treeData)); / / [1]
// console.log(getTreeDeepArr(3, treeData)); / / [1, 3]
// console.log(getTreeDeepArr(5, treeData)); / / [1, 4, 5]
var treeData = [{
    id: 1,
    children: [{
        id: 3
    },{
        id: 4,
        children: [{
            id: 5,
            children: [{
                id: 6
            },
            {
                id: 8
            }]
        }]
    },{
        id: 7
    },{
        id: 12,
        children: [{
            id: 13
        }]
    }]
},{
    id: 2,
    children: [{
        id: 9,
        children: [{
            id: 10
        }]
    }]
},{
    id: 11
}];

/ / structure:
// 
/ / 1-3
// -- 4 -- 5 -- 6
/ / -- - 8
/ / - 7
// 2 -- 9 -- 10
/ / 11
// Get the node and its parent relationship
/ / 0 to 1
/ / 1 3
/ / 1 4
/ / 2, 5
/ / 3 6
/ / 3 8
/ / 1 to 7
/ / 0 2
/ / 1 9
10 / / 2
/ / 0 11
function getTreeDeepArr(key, treeData) {

    let arr = []; // An array to operate on recursively
    let returnArr = []; // An array of results
    let depth = 0; // Define the global hierarchy
    // Define a recursive function
    function childrenEach(childrenData, depthN) {

        for (var j = 0; j < childrenData.length; j++) {

            depth = depthN; // Assign the execution level to the global level

            arr[depthN] = (childrenData[j].id);
            
            if (childrenData[j].id == key) {

                // returnArr = arr; // This assignment does not work because it has a pointer relation
                returnArr = arr.slice(0, depthN+1); // Truncate and save the currently matched array into the result array,
                break

            } else {

                if (childrenData[j].children) {

                    depth ++;
                    childrenEach(childrenData[j].children, depth); }}}return returnArr;
    }
    return childrenEach(treeData, depth);
}

function getArr(a) {
    var _input = document.getElementById('input').value;
    
    console.log(getTreeDeepArr(_input, treeData).join(', '))
    document.getElementById('result').innerHTML = 'Result:' + getTreeDeepArr(_input, treeData).join(', ');
}
console.log(getTreeDeepArr(7, treeData));

</script>
</body>
</html>
Copy the code

I hope to be helpful to friends who encounter this problem.