element分页组件的使用

分页组件

<el-pagination
               layout="total, sizes,prev,pager,next,jumper"
               :page-size="pageParams.pagesize"
               :page-sizes="[3,5,7,10]"
               :total="total"
               :current-page.sync="curPage"
               @current-change="hCurrentChange"
               @size-change="hSizeChange"
               />

效果展示

属性与属性值分析

layout

组件布局，子组件名用逗号分隔

• total表示的一共还有多少条
• sizes 表示多少条一页
• prev 上一页
• next下一页
• jumper 前往第几页

属性分析

• page-size 每页显示条目个数，支持 .sync 修饰符
• page-sizes 每页显示个数选择器的选项设置
• total 总条目
• current-page.sync 当前页数，支持 .sync 修饰符
• @current-change currentPage 改变时会触发 回调参数 当前页
• @size-change pageSize 改变时会触发

vue中使用

<template>
<!-- 分页组件 -->
<!-- total, sizes, prev, pager, next, jumper -->
<el-pagination
               layout="total, sizes,prev,pager,next,jumper"
               :page-size="pageParams.pagesize"
               :page-sizes="[3,5,7,10]"
               :total="total"
               :current-page.sync="curPage"
               @current-change="hCurrentChange"
               @size-change="hSizeChange"
               />
</template>

<script>
    export default {
        data() {
            return {
                pageParams: {
                    // 页码  每页几条
                    page: 1,
                    pagesize: 3
                },
                curPage: 0, // 当前页数
                list: [], // 角色列表
                total: 0, // 一共几条数据
            }
        },
        methods:{
            // 分页
            hCurrentChange(curPage) {
                // alert(curPage)
                // 1. 更新页码
                this.pageParams.page = curPage
                // 2. 重发请求
                this.loadRoles()
            },
               // pageSize 改变时会触发
   				 // 每页几条
            // 用户调整了每页显示的条数
            hSizeChange(pagesize) {
                // 1. 更新每页条数
                this.pageParams.pagesize = pagesize
                // 2. 重发请求
                this.loadRoles()
            },
        }
    }
    //分页组件删除最后一条数据后 跳转异常处理
    // 分页异常的处理
//判断是不是最后一条数据 如果是的话 则请求上一页的数据 
    if (this.list.length === 1) {
        this.page--
        if (this.page <= 0) {
            this.page = 1
        }
    }
    
</script>