3

我希望为我的班级项目进行分页，目前使用 Vue.js 和 Bulma + Buefy。我有一个对象数组，我想每页显示 5 个。已经完成布局和一切，我只想知道如何使分页工作。抱歉无法发布代码，因为它在这里显示不正确，但我正在使用 v-for 来显示每次迭代。非常感谢！

4

2 回答 2

4

您可以使用<b-pagination>组件

如果没有您提供的任何代码示例，这将是使用该组件的最小方法

const example = {
    data() {
        return {
            items: [],
            current: 1,
            perPage: 5,
        }
    },
    created() {
      // populate array
      for(var i = 1; i <= 100; i++){
        this.items.push(i)
      }
    },
    computed: {
      total() {
        return this.items.length
      },
      /*
        Filtered items that are shown in the table
      */
      paginatedItems() {
        let page_number = this.current-1
 
        return this.items.slice(page_number * this.perPage, (page_number + 1) * this.perPage);
        
      }
    },
    
}

Vue.config.devtools = false
Vue.config.productionTip = false

const app = new Vue(example)

app.$mount('#app')
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

<div id="app" class="container">

  <div v-for="(item, index) in paginatedItems">
    {{ item }}
  </div>

  <b-pagination
    :total="total"
    :current.sync="current"
    :per-page="perPage"
  >
  </b-pagination>

</div>

于 2019-01-22T21:23:34.917 回答
0

使用显示您的第一个 5 的过滤器。当您单击页面或下一页的编号并具有具有该值的 var 时。您的过滤器将需要读取该变量并为您提供正确的数字或​​对象。

示例：第 1 页 -> 1 到 5 页 2 -> 6 到 10 (2 = +5, 3= +10)

您的过滤器将更新并显示新的过滤器

于 2019-01-22T20:49:08.810 回答