分页使用一:根据页码和页面大小返回PageSize条数据
该方法适用于数据量较大的情景,每次查询根据PageSize和PageNum查询数据并返回前端。在频繁适用时,触发多次访问数据库,效率较低。
项目使用场景:专利检索
数据量:20万条
<a-pagination
v-if="patents.length !== 0"
@change="handleCurrentChange"
:current="currentPage"
:page-size="pageSize"
:total="total">
</a-pagination>
async searchPatent_click(){
console.log(this.tags.join(''))
this.searchLoading = true
// this.spin = true
await request.get("/patent/searchByKeyWords", {
params: {
PageNum: 1,
PageSize: this.pageSize,
words: this.tags.join('')
}
}).then(res => {
if (res.code === '200') {
// console.log(res.data)
this.searchLoading = false
this.patents = res.data.list
this.total = res.data.total
console.log(res.data.total)
}
else if(res.code === '600'){
this.searchLoading = false
this.patents = []
this.total = 0
this.$message.warn({ content: '暂无搜索结果',
icon: () =>
this.$createElement("a-icon", {
props: {
type: "frown"
}
}),
top: '100px',
duration: 2
});
}
})
this.$vuetify.goTo(0, {
duration: 500,
offset: -1600,
easing: 'easeInOutCubic',
})
},
分页使用二:返回所有数据,前端进行“伪分页”
该方法适用于数据量较小的情景,但页面中需要使用分页进行规整。只需在页面创建时访问数据库,若在大数据量情景下使用,会导致一次性读取数据过多,响应时间过长。
<a-list item-layout="vertical" size="large" :pagination="pagination_S" :data-source="listSecret">
<div slot="footer"><b>MindFall</b> Creativity Depository —— 未发布创意</div>
<a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
……
</a-list-item>
</a-list>
pagination_S: {
onChange: page => {
// 页面内跳转
this.$vuetify.goTo(0, {
duration: 500,
offset: -100,
easing: 'easeInOutCubic',
})
},
pageSize: 5,
},
|