vue.js - b表中的vue js过滤器搜索

问题描述

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

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

在这里我想找到一封名为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.jsaxiosvuexbootstrap-vue

vue.js - b表中的vue js过滤器搜索

问题描述

解决方案

推荐阅读