前端 分页踩坑

页面数错误问题

使用element-ui的分页el-pagination,一般这样写：

<el-pagination
   layout="prev, pager, next"
   page-size="5"
   @current-change="getCommentMethods"
   :current-page="nowPage"
   :total='total'
/>

其中page-size是每页展示的条数，total是总条数，调用接口用v-bind绑定，但是会有bug，假设page-size=5，total=11，会只有两页。这时这样改：

<el-pagination
   layout="prev, pager, next"
   :total="total"
   hide-on-single-page
   :page-count="Math.ceil(total / 5)"
   @current-change="changePage"
   :current-page="nowPage"
   background
 />

不要page-size，改用:page-count="Math.ceil(total / 5)"，页面数量并向上取整即可。

v-for 问题

在v-for 中我们会使用到key，我们知道key用index会有性能问题（可以看这篇博客 这篇博客 ）。但他不仅仅有性能问题。
在分页系统使用index做key后假设我们翻页，key其实的值一直是不变的，这导致子组件不会被重新渲染，那么子组件的一些v-if/v-show的状态值会不改变，导致严重bug。