Element-UI组件之分页el-pagination

el-pagination作用

当数据量过多时，使用分页分解数据。

el-pagination使用说明

• 组件属性，如下图所示
  
• 组件事件，如下图所示
  
• 组件在一些时候也可以使用插槽，插入一些内容，如下图说明
  

el-pagination使用案例

首先在页面的容器中放置一个分页组件，至于什么样式，得根据设计稿的要求，给组件添加响应的属性即可，在我的项目中需要展示总条数，每一页展示的条数并可以使用下拉列表进行随时的切换，可以显示的最大页面，上一页，下一页，总共几页，当前第几页等，代码如下：

<h-page-footer>
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </h-page-footer>

响应的事件主要有改变每页的展示数据和改变显示的当前页，代码如下：

 handlePageSizeChange (selectedPageSize) {
      this.pageSize = selectedPageSize
      // 下面是改变了页面展示条数，需要马上触发的事件，如页面展示的一些记录，如果改变了每页展示的条数，也需要马上获取后台的数据
      this.getImmediateAlarmList()
    },
    handleCurrentPageChange (selectedPageNo) {
      this.PageNo = selectedPageNo
      // 下面的事件解释如上
      this.getImmediateAlarmList()
    },

来源：CSDN

作者：阳光下的冷静

链接：https://blog.csdn.net/m0_37686205/article/details/99692484