VUE UI 组件 Element 中分页的使用

从17:00到20:30 与分页战斗

正在清算战利品 >>>>>

1. 分页属性

<div class="block newsPage">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="count"
    layout="total, sizes, prev, pager, next, jumper"
    :total="newsLEngth">
    </el-pagination>
</div>

额 属性的描述就不说了：直接官网文档查看吧
还是简单的说一说吧！

event	用法
size-change	这个是监听当前数据显示条数的 当显示条数发生变化的时候做某件事
current-change	监听当前的页码，当页码发生变化时做某事
page-sizes	可供选择的当前页数据的条数 这里就是当前可显示 5 条数据、10条数据、15条、20条，可自定义
page-size	数据显示的条数
layout	分页器的bar total:总条数、sizes:对应page-sizes选择单页显示数量、prev:上一页、pager:页码、next:下一页、jumper:页面跳转
total	数据的总条数：用于显示在total中 和计算页码

2. 下面是数据