需求背景:
通过接口获取数据(全部数据,未分页),然后把数据展示在表格上(支持分页)
1.获取数据(tableList为获取到的全部数据)
javascript
this.$http.post('/xxxxx', { id }).then((res) => {
if (res.status == 0) {
this.tableList = res.data
//进行分页数据处理的方法
this.initData()
} else {
this.$message.error(res.info)
}
})
2.对数据进行分页处理(pageTable为表格中展示的数据)
javascript
initData() {
this.pageTable = this.tableList.filter(
(item, index) => index < this.pageNum * this.pageSize
&& index >= this.pageSize * (this.pageNum - 1),
)
},
3.表格和分页
html
<el-table
:data="pageTable"
style="width: 100%"
border
height="250"
:header-cell-style="{ backgroundColor: '#f7f8fa', color: 'black' }"
>
<el-table-column fixed prop="skuName" label="商品名称" min-width="120" />
<el-table-column prop="skuId" label="SKU ID" min-width="120" />
<el-table-column prop="thirdCode" label="供应商商品编码" min-width="120" />
<el-table-column prop="brandName" label="品牌" min-width="120" />
<el-table-column label="操作" v-if="pageType != 'see'">
<template #default="scope">
<a style="cursor: pointer; color: #165bd3"
@click="removeProduct(scope.$index, scope.row)">
移除
</a>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 10px; float: right"
v-model:current-page="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="tableList.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
4.分页的方法
javascript
//分页
handleSizeChange(e) {
this.pageSize = e
this.initData()
},
handleCurrentChange(e) {
this.pageNum = e
this.initData()
},
效果: