Vue Iview Tree插件的無限層

Iview

<template>
    <Tree :data="baseData" show-checkbox multiple></Tree>
</template>
<script>
    export default {
        data () {
            return {
                baseData: []
            }
        },
        methods:{
            getTree(){
                var start = new Date().getTime();//起始時間
                //準備數據
                let testData = {
                    "department": [
                        {
                            "departmentName": "測試1",
                            "departmentDesc": "盛達康網絡",
                            "parentId": "",
                            "id": "594a28fb1c8652a01f0301"
                        },
                        {
                            "departmentName": "測試-一級子級",
                            "parentId": "594a28fb1c8652a01f0301",
                            "id": "594a3910202469941"
                        },
                        {
                            "departmentName": "測試-二級子級",
                            "parentId": "594a3910202469941",
                            "id": "594a391020246994asasd1"
                        },
                        {
                            "departmentName": "盛達康",
                            "departmentDesc": "盛達康網絡",
                            "parentId": "",
                            "id": "594a28fb1c8652a01f030126"
                        },
                        {
                            "departmentName": "開發",
                            "parentId": "594a28fb1c8652a01f030126",
                            "id": "594a3910202469941c349d7c"
                        },
                        {
                            "departmentName": "運營",
                            "parentId": "594a28fb1c8652a01f030126",
                            "id": "594a4509202469941c349d7f"
                        },
                        {
                            "departmentName": "人事",
                            "parentId": "594a28fb1c8652a01f030126",
                            "id": "59522e3ef30415281805d39f"
                        },
                        {
                            "departmentName": "瞧瞧",
                            "parentId": "594a3910202469941c349d7c",
                            "id": "597842fc51ec7f80118aa94c"
                        },
                        {
                            "departmentName": "測試層",
                            "parentId": "594a4509202469941c349d7f",
                            "id": "5978436751ec7f80118aa94d"
                        },
                        {
                            "departmentName": "測試1",
                            "parentId": "5978436751ec7f80118aa94d",
                            "id": "5979ad338c9082580984cf0a"
                        },
                        {
                            "departmentName": "測試2",
                            "parentId": "5979ad338c9082580984cf0a",
                            "id": "5979ad418c9082580984cf0b"
                        },
                        {
                            "departmentName": "測試3",
                            "parentId": "5979ad418c9082580984cf0b",
                            "id": "5979ad568c9082580984cf0c"
                        },
                        {
                            "departmentName": "測試4",
                            "parentId": "5979ad568c9082580984cf0c",
                            "id": "5979ad648c9082580984cf0d"
                        }
                    ]
                }
                var data = testData.department
                let treedata = []
                //查找最頂層
                let len = data.length
                for(let j=0;j<len;j++){
                    data[j].expand = false
                    data[j].title = data[j].departmentName
                    if(data[j].parentId == ""){
                        treedata.push({
                            "expand":true,
                            "title":data[j].departmentName,
                            "id":data[j].id
                        })
                    }
                }
                //找到跟最高層id相關的子子孫孫，並給子孫添加lev
                var treedataLevs =[]
                for(let h=0,ls=treedata.length;h<ls;h++){
                    treedataLevs.push({
                        treedataLev:sonsTree(data,treedata[h].id)
                    })
                }
                console.log(treedataLevs)
                for(let p=0,lq=treedataLevs.length;p<lq;p++){
                    var treedataLev = treedataLevs[p].treedataLev
                    //找到最高層的lev
                    var maxLev = 0
                    for(let i=0,lt=treedataLev.length;i<lt;i++){
                        if(parseInt(treedataLev[i].lev) > maxLev){
                            maxLev = parseInt(treedataLev[i].lev)
                        }else{
                            maxLev = maxLev
                        }
                    }
                    //比較當前層和上一層的數據，而後作處理
                    var needLev = maxLev
                    var maxLevTree = []
                    var maxLevTreePrev = []
                    for(let m=0;m<maxLev;m++){
                        maxLevTree = getLevArr(treedataLev,needLev)
                        maxLevTreePrev = getLevArr(treedataLev,needLev-1)
                        for(var j=0,lp=maxLevTreePrev.length;j<lp;j++){
                            maxLevTreePrev[j].children = new Array()
                            for(var i=0,lm=maxLevTree;i<lm.length;i++){
                                if(maxLevTree[i].parentId == maxLevTreePrev[j].id){
                                    maxLevTreePrev[j].children.push(maxLevTree[i])
                                }
                            }
                        }
                        needLev--
                    }
                    treedata[p].children = maxLevTreePrev
                }
                
                this.baseData = treedata
                //找出同一級的數據
                function getLevArr(arr,lev){
                    var newarr = []
                    for(let i=0,la=arr.length;i<la;i++){
                        //這裏對arr 的children 作處理
                        arr.children = new Array()
                        if(parseInt(arr[i].lev) == lev){
                            newarr.push(arr[i])
                        }
                    }
                    return newarr
                }
                //給每一個數據添加一個lev
                function sonsTree(arr,id){
                    var temp = [],lev=0;
                    var forFn = function(arr, id,lev){
                        for (var i = 0; i < arr.length; i++) {
                            var item = arr[i];
                            if (item.parentId==id) {
                                item.lev=lev;
                                temp.push(item);
                                forFn(arr,item.id,lev+1);
                            }
                        }
                    };
                    forFn(arr, id,lev);
                    return temp;
                }
                var end = new Date().getTime();//結束時間
                console.log("Tree初始化的時間是"+(end - start)+"ms")//返回函數執行須要時間
            }
        },
        created:function(){
            this.getTree()
        }
    }
</script>

---

啥也不說了 看代碼吧