ant design Vue 纯前端实现分页问题
作者:想喝橙汁儿
这篇文章主要介绍了ant design Vue 纯前端实现分页问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
ant design Vue纯前端实现分页功能
(有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页)
自己想的一个简单方法
通过页码改变事件,每页数据个数改变事件,获取改变后的页码,每页条数,获取数组中对应的数据。
代码如下:
html:
<template> <div> <h3>学习文件</h3> <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 style="margin-top: 20px;" 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 ); }, },
ant design vue中分页器的使用注意事项
1. 输入defaultPageSize: '5',pageSizeOptions: ['5', '10', '15', '20']等时,需要是String的形式,否则只会展示具体数字,而不是以5条/页的形式
正确样式
错误样式
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。