如何使用 Buefy 进行非 table 分页

Question

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

Answer 1

做一个过滤器，显示您的前 5 个。当您单击页码或下一页并有一个具有该值的 var 时。您的过滤器将需要读取该变量并为您提供正确的数字或对象。

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

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

Answer 2

可以使用<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>

如何使用 Buefy 进行非 table 分页

How to make non table pagination with Buefy

vue.js

pagination

buefy