Vuejs2 分页在筛选项Vuetify数据表中不起作用
我有一个vuetify数据表,在这里我用(自定义)过滤项绑定该表Vuejs2 分页在筛选项Vuetify数据表中不起作用,vuejs2,vuetify.js,Vuejs2,Vuetify.js,我有一个vuetify数据表,在这里我用(自定义)过滤项绑定该表 <template> <v-data-table :headers="headers" :items="filteredItems" :search="search" no-data-text="No data available."
<template>
<v-data-table
:headers="headers"
:items="filteredItems"
:search="search"
no-data-text="No data available."
hide-actions
class="elevation-1"
:total-items="pagination.totalItems"
:rows-per-page-items="[20, 20]"
>
...
<template slot="pageText" slot-scope="{ pageStart, pageStop }">
From {{ pageStart }} to {{ pageStop }}
</template>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-pagination v-model="pagination.page" :length="pages"></v-pagination>
</div>
<script>
...
export default {
data() {
return {
menu: "",
pagination: {
page: 1,
rowsPerPage: 10,
totalItems: 0
},
...
formatted: "",
search: "",
items: [],
type: "",
...
};
},
computed: {
computedPagination() {
return this.pagination;
},
filteredItems() {
return this.items.filter(i => {
return (
(!this.type || i.Type === this.type) &&
(this.filteredAge === "" ||
this.filteredAge === 0 ||
i.Age < this.filteredAge) &&
this.alumni === "" || i.alumni === this.alumni);
});
},
...
</script>
...
从{pageStart}到{pageStop}
...
导出默认值{
数据(){
返回{
菜单:“”,
分页:{
页码:1,
行页码:10,
总计项目:0
},
...
格式:“,
搜索:“,
项目:[],
类型:“,
...
};
},
计算:{
计算分页(){
返回此项。分页;
},
filteredItems(){
返回此.items.filter(i=>{
返回(
(!this.type | i.type==this.type)&&
(this.filteradage==“”||
this.filteredAge==0||
i、 年龄
(我通过一个单独的方法获取数据并填充“items”数组,上面显示的代码中省略了这个方法)
尽管定义了分页,但它仍按预期工作(只显示数据表下方的图标,而不执行任何操作)
是因为缺少filteredItems还是其他配置
谢谢这是因为您有分页功能。totalItems:0。
当组件装入()时,需要将pagination.totalItems初始化为filteredItems.lenght或items.lenght
mounted(){
this.pagination.totalItems = items.length;
},