vue.js - Vuetify外部分页不显示页码
问题描述
我有一个 v-data-table,我正在尝试为其添加分页。我已经按照示例文档here我看不出我做错了什么。创建我的组件时,它会调用我的后端来填充项目列表。然后将其传递给数据表。
我还有一个搜索栏,如果我在其中输入任何内容,就会弹出页码。
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 的错误或问题。
推荐阅读
- java - EventHub 检查点管理器未更新 Azure Blob
- macos - 错误:同上:不支持操作和同上:未知压缩类型
- python - 指定颜色参数后,绘图平行图给出错误的分类
- sql - 如何根据 tsql 中的条件过滤重复行?
- recursion - 雪花,递归 CTE,获取错误字符串 'AAAA_50>BBBB_47>CCCC_92' 太长,将在 'CONCAT' 中截断
- spring-boot - 由于 splunk 依赖,Kubernetes 作业未完成
- forms - 我如何将谷歌表单文件上传到特定文件夹中
- php - Laravel 7.x 的 Laravel 函数 latestOfMany
- odoo - 资产(图像、css、js)文件在 Odoo 11 中无法正确加载
- python - 简单的老虎机代码选择相同的选项(汤普森采样)