Vue2.0+ElementUI+Pagination实现的表格分页
首先 el-table
和 el-pagination
是不同的组件的,所以不存在什么联系
- 表格
<div class="myclass">
<el-table
v-if="isActive"
/************************重点就在于这里****************************/
:data="tableData.slice((currpage - 1) * pageSize, currpage * pageSize)"
/************************重点就在于这里****************************/
:header-cell-style="{background:'#f3f1f2'}"
style="width: 100%;border-radius:6px"
>
<el-table-column prop="orderNo" label="期数" width="160"></el-table-column>
<el-table-column prop="number" label="号码" width="160"></el-table-column>
<el-table-column prop="pattern" label="类型" width="160"></el-table-column>
<el-table-column prop="symbol" label="symbol" width="160"></el-table-column>
<el-table-column prop="createTime" label="投注时间" min-width="160"></el-table-column>
</el-table>
</div>
- 分页
<div align="center" style="margin-top:10px">
<el-pagination
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 15, 20]"
:page-size="pageSize"
:total="tableData.length"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
></el-pagination>
</div>
- 数据 方法部分
data() {
return {
isActive: true,
value: false,
totalCount: 80,
tableData: [],
pageNum: 1,
pageSize: 10,
currpage: 1
};
},
methods: {
handleCurrentChange(cpage) {
this.currpage = cpage;
console.log(this.currpage);
},
handleSizeChange(psize) {
this.pageSize = psize;
console.log(this.pageSize);
},
handleSelectionChange(val) {
console.log(val);
},
}
:data="tableData.slice((currpage - 1) * pageSize, currpage * pageSize)"
这里就是分页所在的重点之处了,根据用户切换每页显示多少行或者切换到那一页,都是可以控制