vue中使用element-ui实现分页

<el-pagination
    background
    @current-change="handleCurrentChange"
    layout="prev, pager, next"
     :total="oldlistItem.length"
     :current-page.sync="currentPage">
</el-pagination>

• background 是表示页码是否带背景颜色，可以通过

.active{
    background-color: #FC8C49;
    color: #fff !important;
}

image.png

来改变页码背景颜色和字体颜色。

• @current-change是页码改变时候的处理函数，分页就是通过此函数来改变对应页码所显示的内容的
• layout 是组件布局，子组件名用逗号分隔
• :total是数据总条数
• :current-page是当前显示的页码，当点击其他按钮需要跳转到页码为第一页的时候就可以通过this.currentPage = 1来实现跳转到第一页了。

更多参数

image.png
image.png

element-ui官网http://element-cn.eleme.io/#/zh-CN/component/pagination