1: 前台 vue 界面的写法
<template>
<div>
<!-- 分页 @current-change = getTeacherList1 这个配置必须要有，
注意：但是切记不能写出getTeacherList1(),因为这么写 默认是无参，下一页时候，page一直就是1；如果这样写getTeacherList1，分页插件就会去更新page这个值
因为分页点击下一页要去调用查询getTeacherList1方法-->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getTeacherList1"
/>
</div>
</template>
<script>
// 引入teacher.js中的方法
// import { getTeacherList } from '@/api/teacher'
import teacher from '@/api/teacher'
export default {
data(){
return {
list:null, //返回显示的数据
page:1, // 当前页数
limit:5, // 显示条数
total:0, // 总页数
teacherQuery:{} // 查询条件封装对象
}
},
created(){
this.getTeacherList1()
},
methods: {
getTeacherList1(page=1){
// debugger
this.page=page
// 分页调用后台方法
teacher.getTeacherList(this.page,this.limit,this.teacherQuery)
.then(response=>{
// debugger
// console.log(response.data.rows)
// console.log(response.data.total)
this.list=response.data.rows
this.total=response.data.total
})
.catch()
}
}
}
</script>
效果展示：
