b表中的vue js过滤器搜索

Posted 2023-02-22

【中文标题】b表中的vue js过滤器搜索

【英文标题】：vue js filter search in b-table

【发布时间】：2021-11-08 04:41:38

【问题描述】：

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

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

我想在这里找到一封名为 [e-mail] 的电子邮件，该电子邮件在第 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)
    ,
  ,

【参考方案1】：

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

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

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