[TOC]
设置基本布局结构，底部列表使⽤ Element 的 Tree 组件，后续通过属性配置可以直接设置拖拽功能。

设置 draggable 实现列表项拖拽

请求数据创建列表内容，接⼝为章节内容 -> getSessionAndLesson 接⼝。 // services/course-section.js (新建) import request from ‘@/utils/request’ // 获取章节和课时 export const getSectionAndLesson = courseId => { return request({ method: ‘GET’, url: ‘/boss/course/section/getSectionAndLesson’, params: { courseId } }) } 引⼊并使⽤

响应数据的 data 代表章节信息，内部的 lessonDTOS 代表章节内的课时数据。

// section.vue … import { getSectionAndLesson } from ‘@/services/course-section.js’ … created () { this.loadSection() }, methods: { async loadSection () { const { data } = await getSectionAndLesson(this.courseId) if (data.code === ‘000000’) { console.log(data) } } } …

将数据绑定到视图

设置 sections 属性保存课程内容数据 修改 el-tree 组件使⽤的数据 将请求数据绑定到 sections 由于 sections 中的属性与 Tree 需要的默认名称不同，需要修改属性名 children 为 lessonDTOS 代表章节下的课时 ⽽ label 对于章节和课时不同，章节名为 sectionName，课时名为 theme

通过⽂档得知 label 可以设置为函数，内部判断数据进⾏处理即可。

// section.vue … :data=“sections” … > …