js 利用slice做分页的坑

12 篇文章 0 订阅
8 篇文章 0 订阅

由于接口返回的是全部数据,几十条,然后用slice做分页(slice语法,从索引 到 结束索引)

一路顺畅无比,感觉没问题,到最后一页分页事件的时候,直接没有数据了。

pagesize为是4,调用方式一直是:

let pageindex = (this.pageForm.pageindex - 1) * this.pageForm.pagesize

row.slice(pageindex, pageindex + 4)//从第几条到第几条

 到最后一页无数据了,无语

let count = pageindex + this.pageForm.pagesize < this.pageForm.pagecount ? this.pageForm.pagesize :
                        pageindex + this.pageForm.pagesize - this.pageForm.pagecount

于是计算了最后一页获取条数

row.slice(pageindex, count)

依然无数据,最后想到应该不传参数,就是一直取数组到最后,于是最后一页改成

 row.slice(pageindex)

 人都不好了,为什么这么坑

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装Vue.js 首先,你需要安装Vue.js。你可以通过以下命令进行安装: ``` npm install vue ``` 2. 安装Vue.js分页组件 Vue.js有很多分页组件可用,例如vue-pagination、vue-paginator、vuejs-paginate等。你可以选择其中一个,也可以根据自己的需要自己编写分页组件。 以下是一个使用vue-pagination组件的示例: 首先,安装vue-pagination: ``` npm install vue-pagination ``` 然后,在你的Vue.js组件中,导入vue-pagination: ``` import Pagination from 'vue-pagination'; ``` 在模板中使用vue-pagination: ``` <template> <div> <ul> <li v-for="item in items">{{ item }}</li> </ul> <pagination :current="currentPage" :total="totalPages" @page-changed="onPageChanged"></pagination> </div> </template> ``` 在脚本中设置currentPage和totalPages: ``` <script> import Pagination from 'vue-pagination'; export default { components: { Pagination, }, data() { return { items: [], // 分页列表 currentPage: 1, // 当前页码 totalPages: 10, // 总页数 }; }, methods: { onPageChanged(page) { // 当分页发生变化时 this.currentPage = page; this.getItems(); }, getItems() { // 获取分页数据 // ... }, }, }; </script> ``` 3. 实现分页功能 现在,你需要实现分页功能。首先,你需要获取分页数据。你可以使用Vue.js的生命周期钩子函数created来获取数据: ``` created() { this.getItems(); }, ``` 然后,在getItems方法中,你需要根据当前页码和每页显示的数据量来获取数据: ``` getItems() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; this.items = this.allItems.slice(start, end); }, ``` allItems是包含所有数据的数组,pageSize是每页显示的数据量。 最后,当分页发生变化时,你需要重新获取数据: ``` onPageChanged(page) { this.currentPage = page; this.getItems(); }, ``` 这样,你就可以使用Vue.js分页组件来实现分页功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值