这篇“怎么使用ant design Vue纯前端实现分页”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用ant design Vue纯前端实现分页”文章吧。
(有选择的话最好让后端分页，前端分页可能会有问题，为了性能，尽量不要前端分页)
通过页码改变事件，每页数据个数改变事件，获取改变后的页码，每页条数，获取数组中对应的数据。
代码如下：
html：
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<h4>学习文件</h4>
<div class="videoMain" v-if="dataSourceList.length">
<div class="videoBox" v-for="item in dataSourceList" :key="item.index">
<a-tooltip placement="top">
<template slot="title">
{{item.name}}
</template>
<a class="ellipsis" :href="item.VUrl" rel="external nofollow" >{{item.name}}</a>
</a-tooltip>
</div>
</div>
<!-- 分页 -->
<div v-if="dataSourceList.length">
<a-pagination size="small"
:total="ipagination.total"
v-model="ipagination.current"
show-size-changer
show-quick-jumper
:page-size-options="ipagination.pageSizeOptions"
:page-size="ipagination.pageSize"
@change="pageChange"
@showSizeChange="onShowSizeChange"
:show-total="ipagination.showTotal" />
</div>
<div class="nullError" v-else>
<p>暂无文件</p>
</div>
</div>
</template>data：
data() {
return {
description: '文件列表組件',
dataSource:[], //获取的数据
dataSourceList:[],//分页后的数据
/* 分页参数 */
ipagination:{
current: 1,//当前页数
pageSize: 6,
pageSizeOptions: ['6', '10','20','30', '50'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
};
},获取数据：
created() {
this.loadData(); ///获取数据的方法
},methods：
loadData(){
getAction(this.URL).then((res)=>{
if(res.success){
this.dataSource = res.result.records;
}else{
this.$message.error(res.message)
}
}).finally(()=>{
//获取数据后调用一次分页方法
this.changeData(param.current,param.pageSize);//获取数据后调用一次分页方法
})
},
// 页码改变的回调，参数是改变后的页码及每页条数
pageChange(page,pageSize){
this.changeData(page,pageSize);
},
// 下拉选项改变， 参数是改变后的页码及每页条数
onShowSizeChange(current, pageSize) {
this.ipagination.pageSize = pageSize;
this.changeData(current,pageSize);
},
// 分页改变时,获取对应的数据，动态改变数据
changeData(page,pageSize){
var p = (page - 1)*pageSize;
var pSize = page*pageSize;
var dataSourceList = [];
this.dataSource.forEach((item,index)=>{
if(p<= index && index< pSize){
dataSourceList.push(item)
}
})
this.dataSourceList = dataSourceList;
}主要是后面几个方法，changeData是改变的具体方法。
方式二
用computed 属性计算
computed: {
TableData() {
return this.teacherList.slice(
(this.pagination.page - 1) * this.pagination.limit,
this.pagination.page * this.pagination.limit
);
},
},1. 输入defaultPageSize: '5',pageSizeOptions: ['5', '10', '15', '20']等时，需要是String的形式，否则只会展示具体数字，而不是以5条/页的形式
正确样式
错误样式
以上就是关于“怎么使用ant design Vue纯前端实现分页”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/weixin_46328144/article/details/121330268
