Question

我希望为目前使用Vue.js和Bulma + Buefy的课堂项目进行分页。我有一个对象数组，我想每页显示5个。已经完成了布局并完成了所有工作，我只想知道如何使分页工作。抱歉，由于此处未正确显示代码，因此无法发布代码，但是我使用v-for显示每次迭代。非常感谢！

Answer 1

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

Answer 2

执行一个过滤器，该过滤器将显示您的前5个。单击页面或下一页的编号，然后使用带有该值的变量。您的过滤器将需要读取该var并为您提供正确的数字或对象。

示例：第1页-> 1至5 第2页-> 6到10（2 = +5，3 = +10）

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

如何使用Buefy进行非表格分页

2 个答案: