问题描述
我有一个 v-data-table,我正在尝试为其添加分页.我已经按照示例文档
为了解决这个问题,当我的后端返回带有表格数据的响应时.我将 totalItems
设置为表中条目数的长度.
this.incidents = response.data['incidents']this.pagination.totalItems = this.incidents.length
在搜索栏中进行修复或键入
不确定这是否是 Vuetify v-data-table 的错误或问题.
I have a v-data-table and I'm trying to add pagination to it. I've followed the example docs here I can't see what I'm doing wrong. When my component is created it makes a call to my backend to populate a list of items. Then this is passed to the data table.
I also have a search bar and if I enter anything in it the page numbers pop up then.
HTML
<v-data-table
:headers="headers"
:items="incidents"
:search="search"
:pagination.sync="pagination"
hide-actions
class="elevation-1"
item-key="incident_number"
>
</v-data-table>
/* table row html in between */
<div class="text-xs-center pt-2">
<v-pagination v-model="pagination.page" :length="pages" </v-pagination>
</div>
JS
I have a computed property that works out the page number just like in the example.
computed: {
pages ()
{
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
{
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
},
}
Solved the issue. It would work when I enter something in the search bar so I noticed an event was being emitted by Vue. update:pagination
within this there is a key value called totalItems
and it was set to 0
on page load but when I enter something in the search bar it had a value after that.
On Page Load
To resolve the issue, when my backend returns the response with table data. I set the totalItems
to the length of the number of entries in the table.
this.incidents = response.data['incidents']
this.pagination.totalItems = this.incidents.length
With Fix or Typing in Searchbar
Not sure if this is a bug or issue with the Vuetify v-data-table or not.
这篇关于Vuetify外部分页不显示页码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!