在 bootstrap-vue 表中搜索，分页仅显示实际页面中的结果

Question

我正在创建一个bootstrap-vue 表来使用分页、过滤器和搜索来显示汽车列表。 我通过外部 API 获取数据并使用 axios 用数据填充表。

比如我在第二页，在分页第一页内搜索car name，就找不到结果了。

我尝试了与其他答案不同的解决方案，但似乎没有人在工作

这是模板代码

<template slot-scope="row">
  <div>
    <b-form-group label-cols-sm="1" :label="search" class="mt-2 mr-2">
      <b-input-group>
        <b-form-input v-model="filter" placeholder="Type to Search">
        </b-form-input>
        <b-input-group-append>
          <b-button :disabled="!filter" @click="filter = ''">
            {{ $t('labels.frontend.listings.clear') }}
          </b-button>
        </b-input-group-append>
      </b-input-group>
    </b-form-group>
    <!--
    <input type="checkbox" :value="items.id" v-model="selected" />
    -->
    <!-- eslint-disable -->
    <b-table
      striped
      hover
      :items="items"
      :fields="fields"
      :filter="filter"
      selectable
      :select-mode="selectMode"
      selected-variant="success"
      @row-selected="rowSelected"
      :current-page="currentPage"
      :per-page="perPage"
      :outlined="outlined"
      responsive
      autoWidth
    >
      <!-- eslint-disable -->
      <template slot="selected" slot-scope="{ rowSelected }">
        <input type="checkbox" :value="items.id" v-model="selected" />
        <span v-if="rowSelected">✔</span>
      </template>
      <template slot="actions" slot-scope="row">
        <b-button
          size="sm"
          :to="'/account/cars/' + row.item.id"
          class="mr-1"
        >
          Information
        </b-button>
      </template>
      <template slot="delete" slot-scope="row">
        <b-button
          size="sm"
          @click="fireDelete(row.item, row.index)"
          class="mr-1"
          variant="danger"
        >
          <i class="fa fa-trash-o" aria-hidden="true">
          </i>
        </b-button>
      </template>
    </b-table>
    <b-row>
      <b-col md="8" class="my-1">
        <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
          class="my-0"
        ></b-pagination>
      </b-col>
      <b-col md="4">
        <b-form-group label-cols-sm="3" :label="page">
          <b-form-select v-model="perPage" :options="pageOptions"></b-form-select>
        </b-form-group>
      </b-col>
    </b-row>
  </div>
</template>

and this is the script code

export default {
  data() {
    return {
      selectMode: 'multi',
      selected: [],
      filter: null,
      totalRows: 1,
      currentPage: 1,
      perPage: 15,
      pageOptions: [5, 15, 30],
      outlined: true,
      items: []
    }
  },
  mounted() {
    axios.get(this.$app.route('account.api.cars')).then(res => {
      for (let i in res.data) this.items.push(res.data[i])
      this.totalRows = this.items.length
    })
  }
}

boostrap-vue提供的默认搜索方式只搜索实际页面中的结果，有没有在分页中搜索其他项目？

Answer 1

我通过添加这个函数来解决这个问题，通过获取过滤项的长度来实时更改计数器

onFiltered(filteredItems) {
    this.totalRows = filteredItems.length
    this.currentPage = 1
    this.items.count = filteredItems.length
}

Answer 2

如果您从 api 获取数据，我猜您是在为每个页面使用不同的限制和偏移量来调用它。同时，从搜索框中，您需要调用返回整个数据列表的 api。像这样，您可以搜索所有汽车（否则-bootstrap-vue 搜索框的默认行为-，您只是在该页面的汽车中搜索-该页面中显示的汽车=== api 响应那个单页）。过滤器也是如此。您需要根据您的需要调整 vue-bootstrap 的默认行为，在这种情况下根据您的 api 响应。 这是我目前的经验，希望对你有所帮助。 xx