Vue中如何实现按钮点击展示slice截取的下5组数据？

完全可行，你可以通过添加分页状态来控制每次展示的数据区间，以下是具体的实现方案：

步骤1：添加分页状态变量 #

在Vue组件的data中定义两个核心变量：

• currentPage：记录当前展示的页码（从0开始计数）
• pageSize：每页固定展示的数据条数，这里设为5

data() {
  return {
    currentPage: 0,
    pageSize: 5
  }
}

步骤2：修改数据截取逻辑 #

把原来固定的slice(0, 5)改成动态计算的区间，根据当前页码自动切换展示范围：

<tbody>
  <TableRow
    v-for="mandate in filteredMandates.slice(currentPage * pageSize, (currentPage + 1) * pageSize)"
    :mandate="mandate"
    :theme="getColor(mandate.asset_classification)"
    :key="mandate.isin"
  />
</tbody>

步骤3：编写分页切换方法 #

在组件的methods中添加上下页切换逻辑，同时处理边界限制，避免出现超出数据范围的错误：

methods: {
  nextPage() {
    // 计算最大可访问的页码
    const maxPage = Math.floor((this.filteredMandates.length - 1) / this.pageSize)
    if (this.currentPage < maxPage) {
      this.currentPage++
    }
  },
  prevPage() {
    if (this.currentPage > 0) {
      this.currentPage--
    }
  }
}

步骤4：添加上下页按钮 #

在表格下方添加操作按钮，并根据当前页码状态设置禁用规则：

<div class="pagination-controls">
  <button @click="prevPage" :disabled="currentPage === 0">上一页</button>
  <button @click="nextPage" :disabled="currentPage >= Math.floor((filteredMandates.length - 1)/pageSize)">下一页</button>
</div>

完整整合示例 #

把以上部分整合到组件中的完整结构如下：

<template>
  <div>
    <table>
      <tbody>
        <TableRow
          v-for="mandate in filteredMandates.slice(currentPage * pageSize, (currentPage + 1) * pageSize)"
          :mandate="mandate"
          :theme="getColor(mandate.asset_classification)"
          :key="mandate.isin"
        />
      </tbody>
    </table>
    <div class="pagination-controls">
      <button @click="prevPage" :disabled="currentPage === 0">上一页</button>
      <button @click="nextPage" :disabled="currentPage >= Math.floor((filteredMandates.length - 1)/pageSize)">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      pageSize: 5,
      filteredMandates: [] // 你的数据源
    }
  },
  methods: {
    getColor(assetClassification) {
      // 你的主题色逻辑
    },
    nextPage() {
      const maxPage = Math.floor((this.filteredMandates.length - 1) / this.pageSize)
      if (this.currentPage < maxPage) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--
      }
    }
  }
}
</script>

这样就能实现点击按钮切换展示每5条数据的功能，同时避免出现数据越界的错误。

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