[TOC]
课程前台展示：http://edufront.lagou.com/#/
功能分析：
展示上架状态
上下架操作
添加课程
编辑课程
课程内容管理
基础布局展示等重复功能⾃⾏完成。
// course/index.vue 课程组件class=“course”>
// course/components/list.vue 课程列表组件（新建）
class=“course-list”>
:inline=“true”
ref=“form”
label-position=“left”
:model=“filterParams”
>
label=“课程名称：” prop=“courseName”>
v-model=“filterParams.courseName”>
>
label=“状态：” prop=“status”>
v-model=“filterParams.status”>
label=“全部” value=“”>
label=“上架” value=“1”>
label=“下架” value=“0”>
:disabled=“isLoading”
@click=“handleReset”
>重置
type=“primary”
:disabled=“isLoading”
@click=“handleFilter”
>查询
:data=“courses”
v-loading=“isLoading”
style=“width: 100%; margin-bottom: 20px”
>
prop=“id”
label=“ID”
width=“100”>
prop=“courseName”
label=“课程名称”
width=“230”>
prop=“price”
label=“价格”>
prop=“sortNum”
label=“排序”>
prop=“status”
label=“上架状态”>
待处理
prop=“price”
label=“操作”
width=“200”
align=“center”
>
background
layout=“prev, pager, next”
:total=“totalCount”
:disabled=“isLoading”
:current-page=“filterParams.currentPage”
@current-change=“handleCurrentChange”
/>
</el-card>
</div>
</template>
// services/course.js 课程接⼝模块（新建）
import request from ‘@/utils/request’
// 分⻚查询课程信息
export const getQueryCourses = data => {
return request({
method: ‘POST’,
url: ‘/boss/course/getQueryCourses’,
data
})
}
slot=“header”>
数据筛选
slot=“header”>
查询结果：
style=“float: right; margin-top: -10px”
type=“primary”
>添加课程
若有收获，就点个赞吧
0 人点赞
