elementUI分页功能的实现

1：data数据

 // table数据，用于赋值于后台数据接口
tableData: [],
// 页码，页数,时间。可以添加字段用于绑定筛选或者查询
listQuery: { 
  date:'',
  page: 1,
  pageSize: 10,
},
// 数据条数
total:0

2：html

表格标签数据，绑定展示的内容，并做处理
<el-table :data="tableData" class="table">
	  <el-table-column type="index" label="序号" width="180"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
</el-table>

分页标签，
<div class="block pagination-container footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
</div>

3：方法

此方法为分页标签绑定的 当前页面的方法

// 更改每页数据条数
handleSizeChange(val) {
  this.listQuery.pageSize = val;
  this.listQuery.page= 1
  // 这里的方法是切换每页数据条数或者切换页码后对table数据的更新
  
  // 方法里面是赋值给tableData的后台接口数据
  this.feachData();
  
},
// 切换页码
handleCurrentChange(val) {
  this.listQuery.page= val;
  // 这里的方法是切换每页数据条数或者切换页码后对table数据的更新
  
  // 方法里面是赋值给tableData的后台接口数据
  this.feachData();
  
}

效果就实现了