内容管理（六）-分页功能-筛选头部、总页数、总条数、单页总条数、默认和选定的当前页显示

08-内容管理-分页功能

渲染分页组件

• 获取总条数 data.total_count

// 总条数
total: 0

筛选头部结果:

 <div slot="header">根据筛选条件共查询到 {{total}} 条结果：</div>

动态绑定分页的各个属性值:

<!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next, total"
        :current-page="reqParams.page"
        :page-size="reqParams.per_page"
        :total="total"
      ></el-pagination>

• total 总条数
• page-size 每一页显示条数
• current-page 当前选中第几页

实现分页切换

• 绑定 current-change 事件
• 触发事件的时候获取当前页码
• 发请求即可

<el-pagination
        class="pager"
        background
        layout="prev, pager, next, total"
        :current-page="reqParams.page"
        :page-size="reqParams.per_page"
        :total="total"
+        @current-change="changePager"
      ></el-pagination>

methods中的方法：

// 切换分页
    changePager (newPage) {
      // 把提交后台的参数改成新的页码
      this.reqParams.page = newPage
      this.getArticles()
    },