vue 無限級分類導航

遞歸組件，實現無限級分類導航

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>

 

其他方法：https://www.cnblogs.com/duke-peng/p/8550321.html