vue 的下一页和上一页功能

Question

我正在尝试创建一个函数，该函数允许我的表格数据每页仅显示一定数量的行，并具有下一页和上一页功能，而无需使用像 vuetify 这样的外部库。我设法将表格限制为每页 15 行，但我无法转到下一页。这是我的下一个和上一个功能

nextButton() {
     if (this.quotes.length > this.rowsPerPage * (this.currentPage + 1)) {
       this.currentPage += 1; 
     } else {
       this.currentPage += 0;
     }
   },
   previousButton() {
    if (this.currentPage > 0) {
      this.currentPage -= 1; 
    } else {
      this.currentPage -=0;
    }
   },

这是我的计算函数，每页限制为 15 个

computed: {
    quotesPerPage() {
      return this.quotes.slice(0, this.rowsPerPage);
    }
  },

Answer 1

您需要使用 start index 和 end index 对数据进行切片，如您在 Array.prototype.slice 中所见。

首先计算startIndex，它是当前页面索引（基于0）乘以每页的行数。

endIndex 将是 startIndex 加上 rowsPerPage。

示例：

index: 0, start: 0, end: 10
index: 1, start: 10, end: 20
index: 2, start: 20, end: 30

我创建此代码是为了向您展示如何计算指数

我还重写了下一个和上一个代码以使用Math.max 和Math.min，但这只是为了向您展示计算下一页和上一页的不同方法，还有一种方法可以使用if-else 语句来执行此操作

new Vue({
  el: "#pagination-app",
  computed: {
    data: function() {
       const startIndex = this.pageIndex * this.rowsPerPage;
       const endIndex = startIndex + this.rowsPerPage;
       return this.rows.slice(startIndex, endIndex);
    },
    page: function() {
      return this.pageIndex + 1;
    }
  },
  methods: {
    next() {
      const maxPageIndex = Math.ceil(this.rows.length / this.rowsPerPage) - 1;
      this.pageIndex = Math.min(this.pageIndex + 1, maxPageIndex);
    },
    previous() {
      this.pageIndex = Math.max(this.pageIndex - 1, 0);
    }
  },
  data() {
    return {
      rows: [
        { name: "this is the first" },
        { name: "second" },
        { name: "third" },
        { name: "this is the first of second page" },
        { name: "b from 2th" },
        { name: "c from 3th" },
        { name: "foo" },
        { name: "bar, the last item" }
      ],
      pageIndex: 0,
      rowsPerPage: 3
    }
  }
});

.row {
  padding: 10px;
  border: 1px dashed #ccc;
  margin: 5px;
  display: inline-block; /** because the code window is so small **/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="pagination-app" class="demo">
  <div>
    <div class="row" v-for="item in data">
      {{ item.name }}
    </div>
  </div>
  <button v-on:click="previous()">previous</button>
  <button v-on:click="next()">next</button>
  <div>
    page: {{ page }}
  </div>
</div>