element UI的Cascader級聯選擇器編輯時

時間 2019-11-06

標籤 element cascader 級聯選擇器編輯简体版

原文原文鏈接

element UI的Cascader級聯選擇器組件在編輯時，
它須要一個數組值，而通常咱們api給的數據是一個值。
兩個解決方法：javascript

說服後臺，讓後臺給arr。
本身動手豐衣足食，根據給定的值獲取級聯關係數組。

恰好這兩天解決了這個問題。html

寫了一個方法以下：java

function getTreeDeepArr(key, treeData) {

    let arr = []; // 在遞歸時操做的數組
    let returnArr = []; // 存放結果的數組
    let depth = 0; // 定義全局層級
    // 定義遞歸函數
    function childrenEach(childrenData, depthN) {

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

            depth = depthN; // 將執行的層級賦值 到 全局層級

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

                // returnArr = arr; // 原寫法不行, 因 此賦值存在指針關係
                returnArr = arr.slice(0, depthN+1); //將目前匹配的數組，截斷並保存到結果數組，
                break

            } else {

                if (childrenData[j].children) {

                    depth ++;
                    childrenEach(childrenData[j].children, depth);

                }
            }

        }
        return returnArr;
    }
    return childrenEach(treeData, depth);
}
// 結果：
// 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
}];

// 結構：
// 
//   1 --- 3
//     --- 4 --- 5 --- 6
//                 --- 8
//     --- 7
//   2 --- 9 --- 10
//   11

完整html Demo以下：api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
</head>
<body>
<pre>
    // 結構：
// 
//   1 --- 3
//     --- 4 --- 5 --- 6
//                 --- 8
//     --- 7
//     --- 12 --- 13
//   2 --- 9 --- 10
//   11
// 獲取節點以及節點的父級關係
// 0 1
// 1 3
// 1 4
// 2 5
// 3 6
// 3 8
// 1 7
// 1 12
// 2 13
// 0 2
// 1 9
// 2 10
// 0 11
</pre>
    <input type="number" id="input">
    <a href="javascript:;" onclick="getArr()">獲取</a>
    <div id="result">結果：</div>
<script>
// js 獲取樹形深度關係數組
// 樹形數據以下例中的treeData，
// 但願有以下結果：
// 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
}];

// 結構：
// 
//   1 --- 3
//     --- 4 --- 5 --- 6
//                 --- 8
//     --- 7
//   2 --- 9 --- 10
//   11
// 獲取節點以及節點的父級關係
// 0 1
// 1 3
// 1 4
// 2 5
// 3 6
// 3 8
// 1 7
// 0 2
// 1 9
// 2 10
// 0 11
function getTreeDeepArr(key, treeData) {

    let arr = []; // 在遞歸時操做的數組
    let returnArr = []; // 存放結果的數組
    let depth = 0; // 定義全局層級
    // 定義遞歸函數
    function childrenEach(childrenData, depthN) {

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

            depth = depthN; // 將執行的層級賦值 到 全局層級

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

                // returnArr = arr; // 原寫法不行, 因 此賦值存在指針關係
                returnArr = arr.slice(0, depthN+1); //將目前匹配的數組，截斷並保存到結果數組，
                break

            } else {

                if (childrenData[j].children) {

                    depth ++;
                    childrenEach(childrenData[j].children, depth);

                }
            }

        }
        return returnArr;
    }
    return childrenEach(treeData, depth);
}

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

</script>
</body>
</html>

但願對碰到此問題的朋友們有幫助。數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。