如何獲取 Vue Table 頁面上顯示的行數

Question

我正在使用 vue bootstrap 做一個項目，我需要獲取頁面上顯示的行數。 假設我有 24 個數據，並將其存儲在使用分頁的表中。 每頁將包含 n 行，其中 n 是動態數字。 如何實現“顯示 24 個數據中的 n 個數據”。 我真的找不到方法，因為我在互聯網上使用 data.length 找到的大多數示例都返回了 24 的數據長度，同時我需要它返回顯示在該頁面上的 n 行數據。 我希望我的解釋足夠清楚。

Answer 1

看看這個鏈接。

您可以使用b-table上的v-model綁定到當前顯示的行，您可以在其中找到當前顯示的項目的長度。

您還可以綁定到filtered的事件以查找總共顯示了多少項（分頁之前）。

Answer 2

基本上，我們是唯一一個通過在<b-table>上使用:per-page屬性來定義每頁行數的人。 因此，我們已經知道我們在: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>