Vue对象的分页数组

Question

我是Vue和数组的新手。我想对我的json数组进行分页，并将其限制为每页仅10项。然而，在我的<tr>主体中，它显示了数组中的所有列表。我试了别的办法，但没用。有人能帮我找到对这个json数组进行分页并反映在我的表中的最佳方法吗？非常感谢。

这是代码：

https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437

App.vue

<template>
<div id="app">
<table class="table t3">
<thead class="thead">
<tr class="tr">
<th class="td no" width="10%">
<span class="has-text-orange">No</span>
</th>
<th class="td">
<span class="has-text-orange">Name</span>
</th>
</tr>
</thead>
<tbody
class="searchable tbody"
style="max-height: 200px; min-height: 200px"
>
<tr class="tr" v-for="(p, index) in alphabets" :key="index">
<td class="td no" width="10%">{{ ++index }}</td>
<td class="td">{{ p.letter }}</td>
</tr>
</tbody>
</table>
<div class="column is-12">
<nav
class="pagination is-right"
role="navigation"
aria-label="pagination"
>
<ul class="pagination-list">
<li>
<a @click="prev"> Prev </a>
</li>
<li>
<span
class="pagination-link go-to has-text-orange"
aria-label="Goto page 1"
>{{ current }}</span
>
</li>
<li>
<a @click="next()"> Next </a>
</li>
<li>
<input type="text" class="pagination-link" />
</li>
<li>
<button class="button">Go</button>
</li>
</ul>
</nav>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
current: 1,
alphabets: [
{ letter: "a" },
{ letter: "b" },
{ letter: "c" },
{ letter: "d" },
{ letter: "e" },
{ letter: "f" },
{ letter: "g" },
{ letter: "h" },
{ letter: "i" },
{ letter: "j" },
{ letter: "k" },
{ letter: "l" },
{ letter: "m" },
{ letter: "n" },
{ letter: "o" },
{ letter: "p" },
{ letter: "q" },
{ letter: "r" },
{ letter: "s" },
{ letter: "t" },
{ letter: "u" },
{ letter: "v" },
{ letter: "w" },
{ letter: "x" },
{ letter: "y" },
{ letter: "z" },
],
};
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Answer 1

循环通过精简集而不是所有数据。您有一个current页面；为pageSize:创建属性

pageSize: 10

计算缩减集的索引边界，每当current(或pageSize(发生变化时都会发生变化：

computed: {
indexStart() {
return (this.current - 1) * this.pageSize;
},
indexEnd() {
return this.indexStart + this.pageSize;
},
},

使用另一个计算来从边界导出缩减集：

paginated() {
return this.alphabets.slice(this.indexStart, this.indexEnd);
}

循环通过精简集而不是所有数据：

v-for="(p, index) in paginated"

这是你更新的演示(当下一个和上一个按钮溢出时，你必须修复它们(：

new Vue({
el: "#app",
data() {
return {
current: 1,
pageSize: 10,
alphabets: [
{ letter: "a" },
{ letter: "b" },
{ letter: "c" },
{ letter: "d" },
{ letter: "e" },
{ letter: "f" },
{ letter: "g" },
{ letter: "h" },
{ letter: "i" },
{ letter: "j" },
{ letter: "k" },
{ letter: "l" },
{ letter: "m" },
{ letter: "n" },
{ letter: "o" },
{ letter: "p" },
{ letter: "q" },
{ letter: "r" },
{ letter: "s" },
{ letter: "t" },
{ letter: "u" },
{ letter: "v" },
{ letter: "w" },
{ letter: "x" },
{ letter: "y" },
{ letter: "z" },
],
};
},
computed: {
indexStart() {
return (this.current - 1) * this.pageSize;
},
indexEnd() {
return this.indexStart + this.pageSize;
},
paginated() {
return this.alphabets.slice(this.indexStart, this.indexEnd);
}
},
methods: {
prev() {
this.current--;
},
next() {
this.current++;
}
}
});

<div id="app">
<table class="table t3">
<thead class="thead">
<tr class="tr">
<th class="td no" width="10%">
<span class="has-text-orange">No</span>
</th>
<th class="td">
<span class="has-text-orange">Name</span>
</th>
</tr>
</thead>
<tbody
class="searchable tbody"
style="max-height: 200px; min-height: 200px"
>
<tr class="tr" v-for="(p, index) in paginated" :key="index">
<td class="td no" width="10%">{{ indexStart + ++index }}</td>
<td class="td">{{ p.letter }}</td>
</tr>
</tbody>
</table>
<div class="column is-12">
<nav
class="pagination is-right"
role="navigation"
aria-label="pagination"
>
<ul class="pagination-list">
<li>
<a @click="prev"> Prev </a>
</li>
<li>
<span
class="pagination-link go-to has-text-orange"
aria-label="Goto page 1"
>{{ current }}</span
>
</li>
<li>
<a @click="next()"> Next </a>
</li>
<li>
<input type="text" class="pagination-link" />
</li>
<li>
<button class="button">Go</button>
</li>
</ul>
</nav>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/buefy/0.9.4/buefy.min.css" integrity="sha512-kYGHZRStwK4F8bgVhj/J5IEWmEjLbQ7re6mQiYx/LH5pfl8bDQ3g5SaExM/6z59mASfENR8xwVhywnm8ulVvew==" crossorigin="anonymous" />