发布课程-课程分类二级联动
分类: springboot 专栏: 在线教育项目实战 标签: 课程分类二级联动
2023-05-19 19:09:01 361浏览
课程分类二级联动
递归查询出的分类已经是把二级挂在了一级上了,所以没联动的时候(选中一级后找二级的时候),没必要再调接口查一遍。
<el-form-item label="课程分类"> <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged"> <el-option v-for="subject in subjectOneList" :key="subject.id" :label="subject.title" :value="subject.id"/> </el-select> <!-- 二级分类 --> <el-select v-model="courseInfo.subjectId" placeholder="二级分类"> <el-option v-for="subject in subjectTwoList" :key="subject.id" :label="subject.title" :value="subject.id"/> </el-select> </el-form-item>
//点击某个一级分类,触发change,显示对应二级分类 subjectLevelOneChanged(value) { //把二级分类id值清空 this.courseInfo.subjectId = '' //value就是一级分类id值 //遍历所有的分类,包含一级和二级 for(var i=0;i<this.subjectOneList.length;i++) { //每个一级分类 var oneSubject = this.subjectOneList[i] //判断:所有一级分类id 和 点击一级分类id是否一样 if(value === oneSubject.id) { //从一级分类获取里面所有的二级分类 this.subjectTwoList = oneSubject.children } } }, //查询所有的一级分类 getOneSubject() { subject.getSubjectList() .then(response => { this.subjectOneList = response.data.list }) }, //根据课程id查询 getInfo() { course.getCourseInfoId(this.courseId) .then(response => { //在courseInfo课程基本信息,包含 一级分类id 和 二级分类id this.courseInfo = response.data.courseInfoVo //1 查询所有的分类,包含一级和二级 subject.getSubjectList() .then(response => { //2 获取所有一级分类 this.subjectOneList = response.data.list //3 把所有的一级分类数组进行遍历, for(var i=0;i<this.subjectOneList.length;i++) { //获取每个一级分类 var oneSubject = this.subjectOneList[i] //比较当前courseInfo里面一级分类id和所有的一级分类id if(this.courseInfo.subjectParentId == oneSubject.id) { //获取一级分类所有的二级分类 this.subjectTwoList = oneSubject.children } } }) //初始化所有讲师 this.getListTeacher() }) },
好博客就要一起分享哦!分享海报
此处可发布评论
评论(0)展开评论
暂无评论,快来写一下吧
展开评论
他的专栏
他感兴趣的技术