【发布时间】：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>【问题讨论】：
标签： javascript vue.js axios nuxt.js bootstrap-vue