我正在使用 vue bootstrap 做一個專案，我需要獲取頁面上顯示的行數。假設我有 24 個資料，并將其存盤在使用分頁的表中。每頁將包含 n 行，其中 n 是動態數字。如何實作“顯示 24 個資料中的 n 個資料”。我真的找不到方法，因為我在互聯網上使用 data.length 找到的大多數示例都回傳了 24 的資料長度，同時我需要它回傳顯示在該頁面上的 n 行資料。我希望我的解釋足夠清楚。
uj5u.com熱心網友回復：
看看這個鏈接。
您可以使用 系結到當前顯示的行，您可以v-model在b-table其中找到當前顯示的專案的長度。
您還可以系結到filtered 事件以查找總共顯示了多少專案（分頁之前）。
uj5u.com熱心網友回復：
:per-page基本上，我們是唯一一個使用on 屬性定義每頁行數的人<b-table>。因此，我們已經知道我們在傳遞什么數字作為值:per-page。
看看下面的現場演示，你會明白的：
window.onload = () => {
new Vue({
el: '#app',
data: {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
]
},
computed: {
rows() {
return this.items.length
}
}
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<div id="app">
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507937.html
上一篇：VueJSTypeError：無法讀取未定義的屬性（讀取'toLowerCase'）
下一篇：獲取所有標簽黃瓜的串列