1、页面效果
2、页面代码
<template>
<div style="margin-top: 10px">
<el-table :data="courseList" size="mini" border stripe v-loading="tableLoading" style="width: 100%">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="name" width="300" align="center" label="课程名称"></el-table-column>
<el-table-column prop="hours" width="120" align="center" label="总课时/节"></el-table-column>
<el-table-column prop="price" width="120" align="center" label="课程学费"></el-table-column>
<el-table-column prop="typeId" width="120" align="center" label="课程类型"></el-table-column>
<el-table-column prop="deptId" width="120" align="center" label="开课部门"></el-table-column>
<el-table-column prop="teacherId" width="120" align="center" label="主讲老师"></el-table-column>
<el-table-column prop="description" width="500" align="center" label="课程描述"></el-table-column>
<el-table-column prop="createTime" width="150" align="center" label="创建时间"></el-table-column>
<el-table-column prop="updateTime" width="150" align="center" label="更新时间"></el-table-column>
<el-table-column align="center" label="操作"></el-table-column>
</el-table>
<div style="text-align: right;margin-top: 10px">
<el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="totalRecords" :page-size="pageSize"></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "Kindergarten",
data() {
return {
courseList: [],
tableLoading: false,
keywords: "All",
pageSize: 30,
currentPage: 1,
totalRecords: -1,
}
},
mounted:function () {
this.loadCourseList();
},
methods:{
currentChange(currentPage){
this.currentPage = currentPage;
this.loadCourseList();
},
loadCourseList(){
this.tableLoading = true;
var _this = this;
this.postRequest("/course/search?keywords="+_this.keywords+"&page_size="+_this.pageSize+"&page_num=" + _this.currentPage).then(resp=> {
_this.tableLoading = false;
if (resp && resp.status == 200) {
var data = resp.data;
_this.courseList = data.obj.data.list;
_this.totalRecords = data.obj.data.total;
}
})
}
}
}
</script>
<style scoped>
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/10476.html
