iview page组件问题

iview 3.x page组件出现页码混乱的问题

img


看了下传参都没问题，有些页面点着点着就会出现这个情况

如果在使用 iView 3.x 的 Page 组件时，出现了页码混乱的问题，可能原因有以下几点：

  1. 页码传入类型错误。
    在使用 Page 组件时，页码的类型必须是 Number，如果传入的是 String 类型，可能会导致页码混乱。您可以在传参时进行类型转换，例如：
<Page :total="total" :current="Number(current)" :page-size="pageSize"></Page>
  1. 数据列表长度不足一页时，页码数量显示不正确。
    如果数据列表的长度少于一页的数量，例如列表总共只有 5 条数据，但是一页需要显示 10 条数据，则页码数量就会显示为 1。此时，第一页的页码实际上应该为 1，而不是 0。您可以在传参时对页码进行处理，例如：
// 计算总页数
let totalPage = parseInt(Math.ceil(total / pageSize))
// 当前页码为 0 时，手动赋值为 1
let currentPage = current === 0 ? 1 : current
<Page :total="total" :current="currentPage" :page-size="pageSize"></Page>
  1. 数据列表为空时，页码数量显示不正确。
    如果数据列表为空，可能会导致页码数量显示为 1，但是此时应该不显示页码。您可以在传参时对页码进行处理，例如：
<Page v-if="total > 0" :total="total" :current="current" :page-size="pageSize"></Page>

通过对页码传入值的处理，可以解决 iView 3.x Page 组件出现页码混乱的问题。如果问题依然存在，您可以通过检查数据列表是否正常获取、页码传入是否正确等方法进行排查。