b表中的vue js过滤器搜索答案

【问题标题】：vue js filter search in b-tableb表中的vue js过滤器搜索
【发布时间】：2021-11-08 04:41:38
【问题描述】：

我使用 b-table 显示数据，对于 json 我使用这个 https://jsonplaceholder.typicode.com/comments?_page=1&_limit=5

这里我显示限制为 5 的数据，在 b-table 上我使用过滤器或搜索功能。

我想在这里找到一封名为 Dallas@ole.me 的电子邮件，该电子邮件在第 2 页第 7 号 https://jsonplaceholder.typicode.com/comments?_page=2&_limit=5

当我搜索邮件时为什么找不到？

如果我转到第 2 页并搜索有效的电子邮件

我希望如果我在第2页或第3页搜索数据，它可以立即出现，您不必先到第2页和第3页。

这是我的代码

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

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

还有这个

  return {
        filter: null,
        fields: [
         {
            key: 'id',
            label: 'item',
            sortable: true
         },
         {
            key: 'name',
            label: 'item',
            sortable: true
         },
         {
            key: 'email',
            label: 'item',
            sortable: true
         },
         {
            key: 'body',
            label: 'item',
            sortable: true
         },
         { key: 'actions', label: 'Doc' }
         ],
         currentPage: 1,
         perPage: 5,
         totalItems: 0
      }
      created() {
       this.fetchData()
      },
      computed:{
       ...mapState(['mydata'])
      },
 methods: {
    async fetchData() {
      var start = this.currentPage;
      await this.$store.dispatch('getData', start).then(response => {
        this.totalItems = parseInt(response.headers['x-total-count'], 10)
        return response.data
        })
    },
    filterGrid(val){
        return !this.filter || JSON.stringify(val).includes(this.filter)
    },
  },

【问题讨论】：

标签： vue.js axios vuex bootstrap-vue

【解决方案1】：

按照官方文档，默认过滤只是过滤当前数据数组。

过滤在使用时默认应用于原始项目数组数据。 b-table 提供了几种数据过滤方式的选项。

因此，当您使用服务器端分页时，您必须实现自定义过滤器，以便它可以从您的 API 中获取过滤后的数据。

【讨论】：