课程大纲-章节和小节列表功能（前端）

1、在api/chapter.js添加接口

//根据课程id查询章节小节信息
  getChapterVideoById(courseId){
    return request({
      url: `/eduservice/educhapter/getChapterVideoById/${courseId}`,
      method: 'get'
    })
  }

2、在course/chapter.js添加方法

import chapter from "@/api/chapter"
export default {
  data() {
    return {
        courseId:'',
      saveBtnDisabled: false, // 保存按钮是否禁用
      allChapterVideo:[]//章节小节数据集合
    }
  },

  created() {
    console.log('chapter created')
    if(this.$route.params&&this.$route.params.id){
        this.courseId =  this.$route.params.id
        console.log('this.courseId='+this.courseId)
        this.getChapterVideoList()
    }
  },
  methods: {
    //根据课程id查询章节小节信息
    getChapterVideoList(){
      chapter.getChapterVideoById(this.courseId)
      .then(response=>{
         this.allChapterVideo=response.data.allChapterVideo
      })

},
…

3、页面元素实现

<el-button type="text">添加章节</el-button>
      <!--章节-->
      <ul class="chanpterList">
        <li v-for="chapter in allChapterVideo" :key="chapter.id">
          <p>
            {{chapter.title}}
          </p>
          <!--小节（视频）-->
          <ul class="chanpterList videoList">
            <li v-for="video in chapter.children" :key="video.id">
              <p>
                {{video.title}}
              </p>
            </li>
          </ul>
        </li>
      </ul>

4、在chapter.js页面最底端添加样式

<style scoped>
.chanpterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.chanpterList li{
  position: relative;
}
.chanpterList p{
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #DDD;
}
.chanpterList .acts {
    float: right;
    font-size: 14px;
}

.videoList{
  padding-left: 50px;
}
.videoList p{
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #DDD;
}
</style>