前端分页代码示例

teacher.js

import request from '@/utils/request'
export default {
    //1 讲师列表 （条件查询）
    getTeacherList(query) {
        return request({
            url: '/eduservice/teacher/list',
            method: 'get',
            params: query
        })
    }
}

vue中js

<script>
import teacher from '@/api/edu/teacher';
export default {
    data() {//定义变量和初始值
        return {
            list:[],//查询之后接口返回结果
            total:0,//总记录数
            queryParams: {
                pageNum:1,//当前页
                pageSize:10,//每页记录数
                name: undefined,
                level: undefined,
                begin: undefined,
                end: undefined
            }//条件
        }
    },
    created() {//页面渲染之前执行
        this.getList()
    },
    methods: {
        getList(){
            this.loading = true;
            const query = { ...this.queryParams }
            teacher.getTeacherList(query)
            .then(response => {
                console.log(response.rows)
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        }
    }
}
</script>

vue中element-ui分页组件

<el-pagination
    :current-page.sync="queryParams.pageNum"
    :page-size.sync="queryParams.pageSize"
    :total="total"
    style="position: absolute;  bottom: 20px; padding-left: 40%; "
    layout="total, prev, pager, next, jumper"
    @current-change="getList(queryParams.pageNum)"
/>