遞迴元件，實現無限級分類導航

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E9%80%92%E5%BD%92%E7%BB%84%E4%BB%B6

1、向後端請求資料，返回的資料結構長這樣子

2、對後端返回的資料進行整理，整理為我們想要的結構，整理後資料結構長這樣，如果有下級目錄就新增children

最後遞迴元件，頁面顯示結果

父元件

HTML程式碼

<div>
    <synchronize-cell v-for="(item,index) in data" :synClass="item" :key="index"></synchronize-cell>
</div>

js程式碼

data(){
    return{
        data:[]
    }
},
methods:{
    //對後端返回的資料整理為我們想要的結構
    treeData() {
		let tree = this.data.filter((father) => { //迴圈所有項
			let branchArr = this.data.filter((child) => {
				return father.id == child.parentId //返回每一項的子級陣列
			});
			if(branchArr.length > 0) {
				father.children = branchArr; //如果存在子級，則給父級新增一個children屬性，並賦值
			}
			return father.parentId == 0; //返回第一層
		});
		console.log(tree)
		this.data = tree //返回樹形資料
	},
}

子元件

<template>
    <div>
        <div class="courseWrapper" @click.stop="jumpRoute(synClass.type,synClass.courseId)">
            <div class="courseTable" :class="synClass.type==0?'groupBorder':'courseBorder'">
                <div class="clearfl titleStyle" :class="synClass.type==0?'titleBackStyle':''" :style="{paddingLeft:synClass.level*10+'px'}">
                    <div class="title">{{synClass.name}}</div>
                    <div class="play" v-if="synClass.type==1">播放</div>
                </div>
            </div>
            <!-- 無限巢狀的重點就是在這裡啦-判斷是否有子節點，有的話就遍歷子節點 -->
            <template v-if="synClass.children">
                <synchronize-cell v-for="(item,index) in synClass.children" :synClass="item" :key="index"></synchronize-cell>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "synchronize-cell",
        props: {
            synClass: {
                type: Object,
                default: function () {
                    return {}
                }
            },
        },
        methods:{
            jumpRoute(type,courseId){
                console.log(courseId)
                if(type==0){
                    return
                }else {
                    this.$router.push({
                        path:'/main/course/details',
                        query:{
                            courseId:courseId
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .titleBackStyle {
        background-color: #f2f2f2;

    }
    .groupBorder{
        border-bottom: 1px solid #e4e4e4;
    }
    .courseBorder{
        border-bottom: 1px solid #f2f2f2;
    }

    .titleStyle {
        padding: 10px 0;
        padding-right: 10px;
    }

    .clearfl::after {
        display: block;
        content: "";
        clear: both;
    }

    .groupName {
        background-color: #f2f2f2;
        padding: 10px 12px;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
        color: #515151;
    }

    .courseChild::after {
        display: block;
        content: "";
        clear: both;
    }

    .title {
        float: left;
    }

    .play {
        float: right;
    }
</style>