BootstrapVue的b-table搜索过滤无法匹配非当前页数据如何解决？

问题原因 #

你当前采用的是服务端分页方案，每次仅拉取当前页的5条数据存入mydata，BootstrapVue的b-table内置过滤功能仅会对已经加载到items属性中的现有数据做匹配，未加载的其他页数据不在过滤范围内，自然无法搜索到跨页的内容。

解决方案 #

你可以根据业务数据规模选择以下两种方案：

方案1：前端全量加载+本地分页过滤（适合总数据量<1000条的场景） #

该方案直接把所有数据一次性拉到前端，分页和过滤都在前端完成，无需额外改造后端接口：

1. 调整数据拉取逻辑，初始化时一次性拉取全量数据存入vuex的mydata，无需按页请求
2. 修改b-table配置，放开分页能力，让组件自动处理全量数据的分页和过滤，你自定义的filterGrid方法也可以直接复用：

<b-table 
  class="table spacing-table" 
  style="font-size: 13px;"
  show-empty 
  :items="mydata" 
  :fields="fields" 
  :per-page="perPage"
  :filter="filter"
  :filter-function="filterGrid"
>
</b-table>

<b-pagination 
  style="justify-content: center;" 
  size="sm" 
  :total-rows="mydata.length" 
  v-model="currentPage" 
  :per-page="perPage"
>
</b-pagination>

3. 移除currentPage变化时的接口请求逻辑，全量数据下前端会自动完成分页切换，过滤也会作用于全量数据，匹配到的结果会自动展示在第一页。

方案2：服务端过滤+服务端分页（适合大数据量场景） #

如果数据量很大无法全量加载到前端，就需要后端配合支持搜索过滤能力：

1. 监听filter字段变化，一旦搜索词变更，就将currentPage重置为1，同时把搜索词作为参数传给后端接口
2. 后端接口接收搜索参数后，先对全量数据做过滤，再对过滤后的结果做分页，返回当前页数据和过滤后的总条数
3. 前端拿到返回结果后更新mydata和totalItems即可，后续分页切换也需要携带当前的搜索词参数请求接口。

内容的提问来源于stack exchange，提问作者Jon