Question

我正在使用vuetify中的数据表

我想知道在this example上是否可以做一些事情来调用REST api来执行不同的操作，而不是在表正在加载数据，分页，搜索或排序数据时将所有内容存储在内存中？

function checkNumberIfContainsKey(number, key){ return String(number).split('').includes(String(key)) } console.log( checkNumberIfContainsKey(19, 9), //true checkNumberIfContainsKey(191, 9), //true checkNumberIfContainsKey(912, 9), //true checkNumberIfContainsKey(185, 9) //false );：

html

<div id="app"> <v-app id="inspire"> <v-card> <v-card-title> Nutrition <v-spacer></v-spacer> <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details ></v-text-field> </v-card-title> <v-data-table :headers="headers" :items="desserts" :search="search" > <template v-slot:items="props"> <td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.calories }}</td> <td class="text-xs-right">{{ props.item.fat }}</td> <td class="text-xs-right">{{ props.item.carbs }}</td> <td class="text-xs-right">{{ props.item.protein }}</td> <td class="text-xs-right">{{ props.item.iron }}</td> </template> <template v-slot:no-results> <v-alert :value="true" color="error" icon="warning"> Your search for "{{ search }}" found no results. </v-alert> </template> </v-data-table> </v-card> </v-app> </div>：

javascript

Answer 1

如果我理解正确，那么pagination.sync是您要寻找的

基本上，有三个关键部分：

1）将分页obj添加到数据和观察者：

watch: {
    pagination: {
        handler() {
            this.fetchDesserts();
        },
        deep: true
    }
},

和数据中：

pagination: {
    rowsPerPage: 100,
    descending: false,
    sortBy: "name",
    page: 1
  },

2）从内存或API中预加载甜点：

mounted() {
    this.fetchDessert();
}

3）更新您的数据表道具，使其包含pagination.sync，总计项目和显示分页：

 :headers="headers"
 :items="desserts"
 :pagination.sync="pagination"
 :rows-per-page-items="rowsPerPageItems"
 :total-items="totalItems"

这是一个更新的代码笔，它显示了基本概念并包括搜索的使用： https://codepen.io/retrograde/pen/pmzQNP?editors=1010

是否可以在数据加载，搜索，分页和排序时在vuetify数据表上调用REST API？

1 个答案: