vuetify Datatable如何过滤数据而不每次触发API调用

Question

我想知道如何通过单击标题或搜索单词来过滤我当前的可见数据。问题是，如果我单击标题以将某些内容过滤为 desc，它还会对我的后端进行新的 API 调用，但我只想过滤可见数据。我的文本搜索也有同样的问题。

我的代码：

  <v-card>
    <v-card-title>
      My data
      <v-spacer></v-spacer>
       <v-flex xs2>
      <v-text-field
        append-icon="search"
        label="Search data"
        single-line
        hide-details
        v-model="search"
      ></v-text-field>
      </v-flex>
    </v-card-title>
    <v-data-table
        :headers="headers"
        :items="items"
        :total-items="pagination.totalItems"
        :pagination.sync="pagination"
        :search="search"
        item-key="combo_id"
        :rows-per-page-items="[50, 50]"
        hide-actions
      >
      <template slot="items" slot-scope="props">
        <tr @click="getCombo(props.item.combo_id); props.expanded = !props.expanded">
        <td class="text-xs-left">{{ props.item.data }}</td>
        <td class="text-xs-left">{{ props.item.data2 }}</td>
        <td class="text-xs-left">{{ props.item.data3 }}</td>
        <td class="text-xs-left">{{ props.item.data4 }}</td>
        <td class="text-xs-left">{{ props.item.data5 }}</td>
        <td class="text-xs-left">{{ props.item.data6 }}</td>
        <td class="text-xs-left">{{ props.item.data7 }}</td>
       </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>
            <v-btn color="primary" dark @click.stop="commentDialog = true">Show comments</v-btn> Tags: <strong>{{ comboItemTags }}</strong>
            <v-btn color="warning" class="right" @click.stop="editDialog = true">Edit system</v-btn>
          </v-card-text>
        </v-card>
      </template>
    </v-data-table>
    <div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages" :total-visible="10"></v-pagination>
    </div>
  </v-card>

    data () {
      return {
      search: '',
      items: [],
      pagination: {
        page: 1,
        rowsPerPage: 50,
        totalItems: 0
      },
...
...
},
watch: {
        pagination: {
            handler() {
                this.getAllSystemsNewPage(this.pagination.page); //Fetch new data and push into items
            },
            deep: true
        }
    },

Answer 1

问题是当您对项目进行排序/过滤时，分页会被修改。
watch 处理程序接收 val 和 oldval 作为参数。您可以检查页面是否已更改，在这种情况下仅调用 this.getAllSystemsNewPage。

watch: {
  pagination: {
      handler(newVal, oldVal) {
          if (newVal.page !== oldVal.page) {
            this.getAllSystemsNewPage(newVal.page); //Fetch new data and push into items
          }
      },
      deep: true
  }
}