在WordPress + Vue.js 主题 Slearn Pro 发布2.0重写版本后，用户反馈编辑课程选择课时时不够友好，课时很多时选择就相当困难，被选择的课时在后期选择中还会是出现，为了这个功能模块特意花了几天，最终呈现效果完美，体验极佳的课时选择面板。

### 1、默认是没有任何内容

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-01.jpg)### 2、创建章节后

章节标题可再次修改，设置章节描述，创建一个新的课时或者选择已经添加好的课时。

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-02.jpg)### 3、选择课时面板

创建新课时或选择已经的课时都将和当前课程进行关联，其它课程则不能选择已选择的课时。

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-03.jpg)已选择好的课时，添加后将与当前课程进行关联。

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-04.jpg)### 4、选择后的结果

章节可开关，排序和删除，删除，删除章节时，其中的全部课时也将与当前课程取消关联。

课时可排序，预览开关切换，编辑和删除，修改标题回车后也可以修改课时标题。

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-05.jpg)### 5、最终设置好的课时

「JSON 数据」可单独保存起来，这样不管当前课程目录被怎么修改，后期都可复制数据到「JSON 数据」中直接恢复。

 ![](https://pic.salongweb.com/2022/11/slearn-pro-edit-course-06.jpg)