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();
}
效果就实现了