背景
- 有些页面显示数据量不大，或者后端分页比较复杂；不考虑性能情况下前端分页不失为比较好的选择。
实现
- 技术点：VUE + Element (el-table , el-pagination)
DEMO
<template>
<div class="app-container">
<div class="content">
<el-table
v-loading="tableLoading"
:data = "supplierData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
element-loading-text="拼命加载中"
>
<el-table-column prop="supplierId" label="Id" sortable />
<el-table-column prop="supplierName" label="名称" sortable />
</el-table>
<div style="display: flex; justify-content: flex-end;">
<el-pagination :current-page="currentPage" :page-sizes="[15,50,100,300]" :page-size="pageSize" :total="supplierData.length" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Suppliers',
data() {
return {
tableLoading: false,
supplierData: [],
currentPage: 1, // 当前页码
total: 0, // 总条数
pageSize: 15 // 每页的数据条数
}
},
created() {
this.search()
},
methods: {
search() {
this.tableLoading = true
getSupplier(this.filter).then((resp) => {
this.tableLoading = false
if (resp.result) {
this.supplierData = resp.data
this.total = resp.data.length
}
})
},
handleSizeChange(val) {
this.currentPage = 1
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
}
}
}
</script>
