分页常用的完整格式 通用样式

<div v-if="totalPage>0">
 	<el-pagination
      :total="monMsg.count"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="20"
      layout="total, sizes, prev, pager, next"
      @current-change="$_monitoring_init"
       @size-change="handleSizeChange"
       :current-page="PageIndex"
       >
    </el-pagination>
</div>

current-change currentPage 改变时会触发 当前页
size-change pageSize 改变时会触发 返回参数每页条数

export default {
data(){
return {
query: {
PageInfo: {
PageIndex: 1,
PageSize: 20
},
},
}}

$_monitoring_init(currentPage){
        this.query.PageInfo.PageIndex = currentPage
        setTimeout(() => {
          Methods.requestData(Api.url.workstation.GetPatientList, this.query).then(data => {
          //传入的是点击的当前页的PageIndex
          }）
 }

methods: {
//调整页容量
      handleSizeChange(val) {
        this.query.PageInfo.PageSize = val;
        this.query.PageInfo.PageIndex = 1
        this.$_monitoring_init(this.query.PageInfo.PageIndex);
      },
}

<style>
#app .el-pager li.active, #app .el-pager li.active:hover {
  border-color: #2B60F8;
  background-color: #2B60F8;
  color: #fff;
  cursor: default;
}
</style>

2021年12月06号更新
:current-page="PageIndex"是查询返回到第一页