vue下实现分页组件及效果展示

 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>

 

效果展示：