vue 無限級分類導航
阿新 • • 發佈:2018-11-20
遞迴元件,實現無限級分類導航
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>