不使用第三方库的Vue表格上下页分页功能失效问题咨询

核心问题 #

计算属性quotesPerPage的slice方法固定从索引0开始截取数据，因此无论currentPage如何变更，永远只会返回前15条数据，导致分页切换无效果。

修复步骤 #

1. 修改分页计算属性逻辑 #

动态计算每页数据的截取起始、结束下标：

computed: {
  quotesPerPage() {
    const startIndex = this.currentPage * this.rowsPerPage
    const endIndex = startIndex + this.rowsPerPage
    return this.quotes.slice(startIndex, endIndex)
  }
}

2. 可选：简化分页切换逻辑 #

原有切换逻辑可删除冗余的无效赋值，下页判断逻辑用总页数计算更直观：

nextButton() {
  const totalPage = Math.ceil(this.quotes.length / this.rowsPerPage)
  // 页码从0开始，最后一页的页码为总页数-1
  if (this.currentPage < totalPage - 1) {
    this.currentPage += 1
  }
},
previousButton() {
  if (this.currentPage > 0) {
    this.currentPage -= 1
  }
}

注意事项 #

• 初始化时要给currentPage设置默认值0，rowsPerPage设置默认值15
• 如果quotes是异步请求获取的数据源，数据更新后要判断当前currentPage是否超过新数据的最大页码，超过则重置currentPage为0，避免出现空页

内容的提问来源于stack exchange，提问作者tony