1.分页组件
<el-pagination
@current-change="getList"
:current-page="page"
:page-size="limit"
layout="total, prev, pager, next, jumper"
:total="total">
el-pagination>
2.会调用getList方法查询
getList(page=1){
this.page=page
teacher.getTeacherList(this.page,this.limit,this.TeacherQuery)
.then(response=>{
this.list=response.data.rows,
this.total=response.data.total
console.log(this.list)
console.log(this.total)
})
3.条件查询
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="TeacherQuery.name" placeholder="讲师名"/>
el-form-item>
<el-form-item>
<el-select v-model="TeacherQuery.level" clearable placeholder="讲师头衔">
<el-option :value="1" label="高级讲师"/>
<el-option :value="2" label="首席讲师"/>
el-select>
el-form-item>
<el-form-item label="添加时间">
<el-date-picker
v-model="TeacherQuery.begin"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
el-form-item>
<el-form-item>
<el-date-picker
v-model="TeacherQuery.end"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">查询el-button>
<el-button type="default" @click="resetData()">清空el-button>
el-form>
4.清空查询条件
resetData(){
this.TeacherQuery={},
this.getList()
}
5.修改和删除记录
1.添加按钮
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/teacher/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit" >修改el-button>
router-link>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除el-button>
template>
el-table-column>
2.在按钮上绑定事件
@click="removeDataById(scope.row.id)"
3.定义apisrc/api/edu/teacher.js
removeDataById(id){
return request({
url: `/eduservice/teacher/${id}`,
method: 'delete'
})
}
4.调用方法
removeDataById(id){
this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
teacher.removeDataById(id).then(response=>{
this.getList()
})