我有一个 v-data-table,我正在尝试为其添加分页。我已按照示例文档进行操作here https://vuetifyjs.com/en/components/data-tables#example-paginate我看不出我做错了什么。创建我的组件后,它会调用我的后端来填充项目列表。然后将其传递到数据表。
我还有一个搜索栏,如果我在其中输入任何内容,就会弹出页码。
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
我有一个计算属性,可以计算出页码,就像示例中一样。
computed: {
pages ()
{
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
{
return 0
}
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
},
}
解决了问题。当我在搜索栏中输入某些内容时它就会起作用,所以我注意到 Vue 正在发出一个事件。update:pagination
其中有一个关键值称为totalItems
它被设置为0
在页面加载时,但是当我在搜索栏中输入某些内容时,它之后就会有一个值。
页面加载时
为了解决这个问题,当我的后端返回带有表数据的响应时。我设置了totalItems
到表中条目数的长度。
this.incidents = response.data['incidents']
this.pagination.totalItems = this.incidents.length
固定或在搜索栏中输入
不确定这是否是 Vuetify v-data-table 的错误或问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)