저는 Vue와 어레이의 초보자입니다. 내 json 배열의 페이지를 매기고 페이지 당 10 개 항목으로 제한하고 싶습니다. 그러나 내 <tr>몸에는 배열의 모든 목록이 표시됩니다. 다른 방법을 시도했지만 작동하지 않았습니다. 누구 든지이 json 배열을 페이지 매김하고 내 테이블에 반영하는 가장 좋은 방법을 찾도록 도와 줄 수 있습니까? 감사합니다.
다음은 코드입니다.
https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437
앱보기
<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>
모든 데이터 대신 축소 된 집합을 반복합니다. 당신은이 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" />이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다