在 vue b-table from axios API 中搜索特定数据

Question

我创建了一个 b-table 来存储来自 Swagger UI 的 API 的所有数据，因为我想制作很多数据通过输入商店代码或分支机构，页面顶部中心的搜索按钮可以正常工作如何为 table 实现过滤器，以便搜索按钮正常工作？提前致谢这是我的代码的顶峰（我已经尝试为商店代码制作过滤器，但它似乎不起作用？

<script>
// eslint-disable-next-line no-unused-vars
import { getAllProvinces } from '~/api/delivery'
export default {
  data() {
    return {
      perPage: 0,
      currentPage: 1,
      rows: 0,

      items: [],

      fields: [
        {
          key: 'id',
          sortable: true,
          label: 'ID',
          class: 'truncate',
        },
        {
          key: 'uploadReference',
          sortable: true,
          label: 'Upload Reference',
          class: 'truncate',
        },
        {
          key: 'requestId',
          sortable: true,
          label: 'Request ID',
          class: 'truncate',
        },
        {
          key: 'storeCode',
          sortable: true,
          label: 'Store Code',
          class: 'truncate',
        },
        {
          key: 'branchCode',
          sortable: true,
          label: 'Branch Code',
          class: 'truncate',
        },
        {
          key: 'b2bId',
          sortable: true,
          label: 'B2B ID',
          class: 'truncate',
        },
        {
          key: 'request',
          sortable: true,
          label: 'Request',
          class: 'truncate',
        },
        {
          key: 'response',
          sortable: true,
          label: 'Response',
          class: 'truncate',
        },
        {
          key: 'createDate',
          sortable: true,
          label: 'Create Date',
          class: 'truncate',
        },
        {
          key: 'errorClassification',
          sortable: true,
          label: 'Error Classification',
          class: 'truncate',
        },
      ],
    }
  },
  computed: {},

  watch: {
    currentPage: {
      handler(value) {
        this.getAllStock()
      },
      search() {
        const data = this.items
        if (this.search.length > 0) {
          if (data.filter((item) => item.storeCode === this.search)) {
            this.items = data.filter((item) => item.storeCode === this.search)
          } else {
            this.search = ''
            this.getAllStock()
          }
        } else {
          this.getAllStock()
        }
      },
    },
  },
  // components: {
  // },
  created() {
    this.getAllStock()
  },

  mounted() {
    this.getAllStock()
  },
  methods: {
    getAllStock() {
      this.$axios
        .get(
          'http://swaggerlinkhere?requestPage=' +
            this.currentPage +
            '&status=1'
        )

        .then((res) => {
          // eslint-disable-next-line no-console
          console.log(res.data)
          this.items = res.data.stocks
          this.allStock = res.data
          this.rows = res.data.totalDocuments
          // eslint-disable-next-line no-console
          // console.log('cek res stock:', JSON.stringify(res.data))
        })
    },
  },
}
</script>

<style>
.truncate {
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<template>
      <div>
        <b-form inline>
          <label for="status">Status⠀⠀⠀⠀ :</label>
          <div class="col-sm-2">
            <b-form-input text></b-form-input>
          </div>
          <div class="branch">
            <div class="col-lg-10 text-right">
              <b-form inline label-align-sm="right" style="margin-left: 70px">
                <div class="col-sm-2" label for="branch">Branch⠀:</div>
                <div class="col-sm-8">
                  <b-form-input text style="margin-left: 33px"></b-form-input>
                </div>
                <br />
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <div>
        <b-form inline>
          <label for="storecode">Store Code⠀:</label>
          <div class="col-sm-2">
            <b-form-input text></b-form-input>
          </div>
          <div class="branch">
            <div class="col-lg-12 text-right">
              <b-form inline label-align-sm="right">
                <div class="input-group col-sm-10">
                  <b-button
                    v-model="search"
                    variant="dark"
                    style="margin-left: 205px; margin-top: 5px"
                    >Search</b-button
                  >
                </div>
              </b-form>
            </div>
          </div>
        </b-form>
      </div>
      <br />
      <br />
      <b-card body>
        <b-card-header class="border-0">
          <h3 class="mb-0">Stock List</h3>
        </b-card-header>
        <template>
          <p class="mt-3">Current Page: {{ currentPage }}</p>
          <div class="text-center">
            <b-table
              id="my-table"
              responsive
              dark
              striped
              hover:true
              :items="items"
              :fields="fields"
              :per-page="0"
              :current-page="currentPage"
            >
              <template v-slot:cell()="data">
                <span v-b-tooltip.hover :title="data.value">{{
                  data.value
                }}</span>
              </template>
            </b-table>
          </div>
        </template>
        <div class="overflow-auto">
          <b-card-footer class="py-4 d-flex justify-content-end">
            <b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
            ></b-pagination>
          </b-card-footer>
        </div>
      </b-card>
    </template>

Answer 1

您可以对状态代码和分支代码使用 bootstrap table 过滤器。

var app = new Vue({
  el: '#app',
  data() {
        return {
            filter: null,
            filterOn: [],
            perPage: 0,
            currentPage: 1,
            rows: 0,
            items: [],
            fields: [{
                    key: 'id',
                    sortable: true,
                    label: 'ID',
                    class: 'truncate',
                },
                {
                    key: 'uploadReference',
                    sortable: true,
                    label: 'Upload Reference',
                    class: 'truncate',
                },
                {
                    key: 'requestId',
                    sortable: true,
                    label: 'Request ID',
                    class: 'truncate',
                },
                {
                    key: 'storeCode',
                    sortable: true,
                    label: 'Store Code',
                    class: 'truncate',
                },
                {
                    key: 'branchCode',
                    sortable: true,
                    label: 'Branch Code',
                    class: 'truncate',
                },
                {
                    key: 'b2bId',
                    sortable: true,
                    label: 'B2B ID',
                    class: 'truncate',
                },
                {
                    key: 'request',
                    sortable: true,
                    label: 'Request',
                    class: 'truncate',
                },
                {
                    key: 'response',
                    sortable: true,
                    label: 'Response',
                    class: 'truncate',
                },
                {
                    key: 'createDate',
                    sortable: true,
                    label: 'Create Date',
                    class: 'truncate',
                },
                {
                    key: 'errorClassification',
                    sortable: true,
                    label: 'Error Classification',
                    class: 'truncate',
                },
            ],
        }
    },
    watch: {
        currentPage: {
            handler(value) {
                this.getAllStock()
            },
        },
    },
    methods: {
        getAllStock() {
            this.$axios
                .get(
                    'http://swaggerlinkhere?requestPage=' +
                    this.currentPage +
                    '&status=1'
                )

                .then((res) => {
                    // eslint-disable-next-line no-console
                    console.log(res.data)
                    this.items = res.data.stocks
                    this.allStock = res.data
                    this.rows = res.data.totalDocuments
                    // eslint-disable-next-line no-console
                    // console.log('cek res stock:', JSON.stringify(res.data))
                })
        },
        onFiltered(filteredItems) {
            this.rows = filteredItems.length
            this.currentPage = 1
        },
    },
    created() {
        this.getAllStock()
    },
})

<template>
    <div>
        <div>
            <b-form inline>
                <label for="status">Status:</label>
                <div class="col-sm-2">
                    <b-form-input text></b-form-input>
                </div>
                <b-col lg="6" class="my-1">
                    <b-form-group label="Filter" label-for="filter-input" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0">
                        <b-input-group size="sm">
                            <b-form-input id="filter-input" v-model="filter" type="search" placeholder="Type to Search"></b-form-input>
                            <b-input-group-append>
                                <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
                            </b-input-group-append>
                        </b-input-group>
                    </b-form-group>
                </b-col>
                <b-col lg="6" class="my-1">
                    <b-form-group label="Filter On" description="Leave all unchecked to filter on all data" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0">
                        <b-form-checkbox-group v-model="filterOn" class="mt-1">
                            <b-form-checkbox value="branchCode">Branch Code</b-form-checkbox>
                            <b-form-checkbox value="storeCode">store Code</b-form-checkbox>
                        </b-form-checkbox-group>
                    </b-form-group>
                </b-col>
            </b-form>
        </div>
        <br/>
        <br/>
        <b-card body>
            <b-card-header class="border-0">
                <h3 class="mb-0">Stock List</h3>
            </b-card-header>
            <template>
                        <p class="mt-3">Current Page: {{ currentPage }}</p>
                        <div class="text-center">
                            <b-table id="my-table" :per-page="perPage" :current-page="currentPage" small striped hover responsive show-empty :items="items" :fields="fields" :filter="filter" :filterIncludedFields="filterOn" @filtered="onFiltered">
                            </b-table>
                        </div>
        </template>
            <div class="overflow-auto">
                <b-card-footer class="py-4 d-flex justify-content-end">
                    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
                </b-card-footer>
            </div>
        </b-card>
    </div>
</template>

Answer 2

如果我理解正确，请尝试做这样的事情

var app = new Vue({
  el: '#app',
  data: {
    rawItems:["one", "two", "three", "foo", "bar"],
    searchText:"",
    filteredItems:[]
  },
  mounted: function() {
    this.filteredItems = this.rawItems
  },
  methods: {
    onSearchClick: function () {
      this.filteredItems = this.rawItems.filter(v=>v.indexOf(this.searchText)>=0)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>
    <input v-model="searchText">
    <button @click="onSearchClick">Search</button>
  </p>

<p>{{filteredItems}}</p>
</div>

在 vue b-table from axios API 中搜索特定数据

Search specific data in vue b-table from axios API

javascript

vue.js

axios

nuxt.js

bootstrap-vue