对页码的使用总结

如果所示，

首先我们来看看在组件中的代码

background：分页按钮添加背景色

@size-change：每页条数改变时会触发

@current-change：当前页数改变时触发

@page-sizes：每页显示个数选择器的选项设置[10，30,50,70]

:page-size：每页显示条目个数

layout

组件布局，子组件名用逗号分隔

String

sizes, prev, pager, next, jumper, ->, total, slot

'prev, pager, next, jumper, ->, total'

total：总条目数

 <el-pagination
      class="opc_pagination"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 30, 50, 70]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

在公共数据区中定义：

对应的代码：

currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      total: 0,

在方法中定义：

对应的代码：

handleSizeChange: function (size) {
      this.pagesize = size;
      this.getlist();
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getlist();
    },

 其中getlist是获取表单的数据，total是接口返回给的数据在获取表单的时候，也要获取到

this.total = res.count;