分页静态数据
tableData: [
{
date: "2016-05-02",
name: "王小虎1",
sex: "男",
state: false,
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎2",
sex: "男",
state: false,
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎3",
sex: "男",
state: true,
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎4",
sex: "男",
state: true,
address: "上海市普陀区金沙江路 1516 弄",
},
],
table的data属性
分页计算:(当前页码-1)*页码显示数据数 并且不能大于当前页码 * 页码显示数据数
//slice切片(开始,结束)
:data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
//分页绑定
<el-pagination
background
layout="sizes,prev, pager, next"
:total="tableData.length"
:page-size="pageSize"
@current-change="currentChange"
@size-change="handleSizeChange"
:page-sizes="[1,3,6]"
:current-page="currentPage"
>
</el-pagination>
定义参数
//注意,定义的pageSize需要与分页的:page-sizes数组第一项一致
pageSize:1,
currentPage:1
//实现方法:
currentChange(e) {
this.currentPage = e;
},
handleSizeChange(val) {
console.log(val);
this.pageSize = val;
},