分页插件
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalSize">
</el-pagination>
</div>
定义变量
pageSize: 20,
totalSize: 0,
currentPage: 1,
定义方法
//分页数量显示
handleSizeChange: function handleSizeChange(val) {
this.pageSize = val;
},
//上下翻页
handleCurrentChange: function handleCurrentChange(val) {
this.currentPage = val;
},
//搜索按键
searchPageList() {
this.currentPage = 1
//获取分页数据
this.pageList()
},
el-table表头列表渲染
<el-table
:data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:border="true"
stripe tooltip-effect="light"
v-loading="loading" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading"
highlight-current-row="true" element-loading-background="rgba(255, 255, 255, 0.6)"
:height="tableHeight" ref="table" :row-style="{height:31+'px'}" :cell-style="{padding:3+'px'}">
<el-table-column type="index" label="序号" width="50" align="center" fixed></el-table-column>
</el-table>