```
<template>
<el-pagination
:page-size.sync="pageSize"
:page-sizes="pageSizes"
:current-page.sync="currentPage"
:pager-count="pagerCount"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="sizes,prev,pager,next,jumper,->,total"
:total="50"
></el-pagination>
<!-- :total 属性设置总条数 -->
<!-- layout 设置分页的子组件：sizes,prev,pager,next,jumper,->,total,slot -->
<!-- :page-size 每页显示的条数（默认为10） =>进行数据双向绑定.sync-->
<!-- :page-sizes 每页显示个数选择器的选项设置，默认为[10,20,30,40,50,100] -->
<!-- .sync 修饰符可以和绑定的数据同步______其效果类似于:v-model -->
<!-- :current-page 当前页数，修饰符可以和绑定的数据同步 =>进行数据双向绑定.sync -->
<!-- :pager-count 页码按钮的数量，当总页数超过该值时，页码会折叠（默认是7），必须是5~21之间的基数 -->
<!-- background 可以为分页按钮添加背景色 -->'
</template>
<script>
export default {
name: "Pagination",
methods: {
handleSizeChange(size){
alert(size); //分页pageSize改变时，触发size-change事件
},
handleCurrentChange(page){
alert(page);//分页currentPage改变时，触发current-change事件
}
},
data() {
return {
pageSize:5,//@1->此处为数据单向绑定
pageSizes:[2,5,10,20,30,40,50],
currentPage:3,
pagerCount:9
};
},
};
</script>
```
