从 axios API 搜索 vue b-table 中的特定数据
Posted
技术标签:
【中文标题】从 axios API 搜索 vue b-table 中的特定数据【英文标题】：Search specific data in vue b-table from axios API 【发布时间】：2021-08-22 03:10:14 【问题描述】：我创建了一个 b 表，用于存储来自 Swagger UI 的 API 中的所有数据，因为有很多数据我想通过输入商店代码使页面顶部中心的搜索按钮正常工作或分支 如何为表格实现过滤器，以便搜索按钮按原样工作？提前致谢 这是我的代码的一个高峰（我已经尝试为商店代码制作过滤器，但它似乎不起作用？
<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>【问题讨论】：
【参考方案1】：您可以对状态代码和分支代码使用引导表过滤器。
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>【讨论】：
【参考方案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>【讨论】：
以上是关于从 axios API 搜索 vue b-table 中的特定数据的主要内容，如果未能解决你的问题，请参考以下文章
Vue3.x中全局绑定属性使用Axios和fetchJsonp请求真实api接口数据函数防抖实现百度搜索