每次单击排序时，vuetify Datatable 都会重置搜索结果

Question

如果不触发新的 api 调用，我无法在我的数据表中过滤我的 当前可见 结果。每次我单击其中一列时，数据表都会对同一页面进行新的 API 调用，因此它甚至不会将任何参数附加到 api 调用中，例如 order 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

如果您从服务器获取数据并查看分页对象，则假定所有处理（分页、排序、搜索）都发生在服务器端。

见this example。在getDataFromApi 中的承诺中发生的一切都是对服务器上发生的事情的模拟。您需要将分页对象中的相关数据作为参数传递给服务器 API 调用并返回正确的项目。

编辑：

如何将分页数据传递到后端超出了 vuetify 的范围，并且取决于后端的外观。但是一个简单的例子是这样的：

getDataFromApi () {
  const { sortBy, descending, page, rowsPerPage } = this.pagination
  const query = `page=${page}&sort_by=${sortBy}&sort_order=${descending ? 'desc' : 'asc'}&rows_per_page=${rowsPerPage}`
  axios.get(`/api/endpoint?${query}`).then(...)
}