vue 无限级分类导航
2024-09-29 21:16:56
递归组件，实现无限级分类导航
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
最新文章
- angular路由详解：
- Qt qml pageview 左右滑动分页组件
- Spring AOP：面向切面编程，AspectJ，是基于注解的方法
- Bit-Map
- Python 初学笔记(转)
- 求指定范围里的不重复的N个随机数
- 小程序的1024KB
- 【LeetCode】233. Number of Digit One
- input[type=file]样式更改以及图片上传预览
- NOIP2016 天天爱跑步 正解
- Eureka的基本功能和用法
- C++中的to_string()函数[C++11支持]
- 通过Docker发布RestAPI遇到的种种问题
- git之二: git可视化工具sourcetree
- ReentrantLock和condition源码浅析(一)
- NumPy for MATLAB users
- 【转】python:让源码更安全之将py编译成so
- win10和ubuntu16.04双系统Geom Error
- 0002 - Spring MVC 拦截器源码简析：拦截器加载与执行
- oracle 用户权限相关