如何使用輸入字段過濾 bootstrap vue 表

Question

標題說明了一切。 我想用輸入框過濾我的引導表。

這是組件的我的.html部分：

<b-table
:items="Table"
:fields="fields"
striped
small
>

</b-table>

這是.vue文件

<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>


<script>

import axios from 'axios'

export default {
    name: 'jointable',
    data(){
        return {
            Table: [],
            fields: [
                {key: 'client_id', label: "School Code", sortable: true},
                {key: 'client_name', sortable: true},
                {key: 'uuid', label: "ID", sortable: true},
                {key: 'step', label: "Job Running", sortable: true},
                {key: 'serverid', sortable: true},
                {key: 'create_timestamp', label: "Job Start", sortable: true},
                {key: 'time_elapsed', sortable: true},
                {key: 'wh_db_host', sortable: true}
            ]
        }
    },
    methods : {
        loadData: function(){
            axios.get("http://192.168.56.101:5000/jointable")
            .then((res) => {
                this.Table = res.data
            })
            .catch((err) => {
                console.log(err)
            })
        }
    },
    mounted() {
        this.loadData();

        setInterval(function(){
            this.loadData()
        }.bind(this), 10000)
    },
    computed() {

    }
}
</script>

所以現在你可以看到我的腳本每 10 秒用更新的數據重新加載表。 這可以。 我現在也想讓我的表可搜索/過濾。 我知道我必須使用計算的東西，但我該如何使用它。

感謝幫助我的人！

Answer 1

有多種過濾方法，但最簡單的版本是簡單地將字符串傳遞給b-table上的filter道具。

這將搜索您傳入的字符串的所有列，因此如果您將數據屬性綁定到輸入的v-model ，並將相同的數據屬性綁定到表上的filter屬性，則您在輸入中鍵入的任何內容都將過濾表。

您可以在 文檔中閱讀有關過濾工作原理和其他一些方法的更多 信息。

 new Vue({ el: '#app', data() { return { filter: '', items: [ { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 }, { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 }, { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 }, { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 }, { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }, ] } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script> <link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <div id="app" class="p-5"> <b-input v-model="filter" placeholder="Filter table.."></b-input> <hr /> <b-table :items="items" :fields="fields" :filter="filter"> </b-table> </div>

Answer 2

過濾bootstrap-vue的詳細代碼請參考文檔謝謝

 new Vue({ el: '#app', data() { return { items: [{ isActive: true, age: 40, name: { first: 'Dickerson', last: 'Macdonald' } }, { isActive: false, age: 21, name: { first: 'Larsen', last: 'Shaw' } }, { isActive: false, age: 9, name: { first: 'Mini', last: 'Navarro' }, _rowVariant: 'success' }, { isActive: false, age: 89, name: { first: 'Geneva', last: 'Wilson' } }, { isActive: true, age: 38, name: { first: 'Jami', last: 'Carney' } }, { isActive: false, age: 27, name: { first: 'Essie', last: 'Dunlap' } }, { isActive: true, age: 40, name: { first: 'Thor', last: 'Macdonald' } }, { isActive: true, age: 87, name: { first: 'Larsen', last: 'Shaw' }, _cellVariants: { age: 'danger', isActive: 'warning' } }, { isActive: false, age: 26, name: { first: 'Mitzi', last: 'Navarro' } }, { isActive: false, age: 22, name: { first: 'Genevieve', last: 'Wilson' } }, { isActive: true, age: 38, name: { first: 'John', last: 'Carney' } }, { isActive: false, age: 29, name: { first: 'Dick', last: 'Dunlap' } } ], fields: [{ key: 'name', label: 'Person full name', sortable: true, sortDirection: 'desc' }, { key: 'age', label: 'Person age', sortable: true, class: 'text-center' }, { key: 'isActive', label: 'Is Active', formatter: (value, key, item) => { return value ? 'Yes' : 'No' }, sortable: true, sortByFormatted: true, filterByFormatted: true }, { key: 'actions', label: 'Actions' } ], totalRows: 1, currentPage: 1, perPage: 5, pageOptions: [5, 10, 15, { value: 100, text: "Show a lot" }], sortBy: '', sortDesc: false, sortDirection: 'asc', filter: null, filterOn: [], infoModal: { id: 'info-modal', title: '', content: '' } } }, computed: { sortOptions() { // Create an options list from our fields return this.fields .filter(f => f.sortable) .map(f => { return { text: f.label, value: f.key } }) } }, mounted() { // Set the initial number of items this.totalRows = this.items.length }, methods: { info(item, index, button) { this.infoModal.title = `Row index: ${index}` this.infoModal.content = JSON.stringify(item, null, 2) this.$root.$emit('bv::show::modal', this.infoModal.id, button) }, resetInfoModal() { this.infoModal.title = '' this.infoModal.content = '' }, onFiltered(filteredItems) { // Trigger pagination to update the number of buttons/pages due to filtering this.totalRows = filteredItems.length this.currentPage = 1 } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script> <link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" /> <div id="app" class="p-5"> <template> <b-container fluid> <!-- User Interface controls --> <b-row> <b-col lg="6" class="my-1"> <b-form-group label="Sort" label-for="sort-by-select" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0" v-slot="{ ariaDescribedby }" > <b-input-group size="sm"> <b-form-select id="sort-by-select" v-model="sortBy" :options="sortOptions" :aria-describedby="ariaDescribedby" class="w-75" > <template #first> <option value="">-- none --</option> </template> </b-form-select> <b-form-select v-model="sortDesc" :disabled="!sortBy" :aria-describedby="ariaDescribedby" size="sm" class="w-25"> <option :value="false">Asc</option> <option :value="true">Desc</option> </b-form-select> </b-input-group> </b-form-group> </b-col> <b-col lg="6" class="my-1"> <b-form-group label="Initial sort" label-for="initial-sort-select" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0"> <b-form-select id="initial-sort-select" v-model="sortDirection" :options="['asc', 'desc', 'last']" size="sm"></b-form-select> </b-form-group> </b-col> <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 v-model="sortDirection" 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" v-slot="{ ariaDescribedby }"> <b-form-checkbox-group v-model="filterOn" :aria-describedby="ariaDescribedby" class="mt-1"> <b-form-checkbox value="name">Name</b-form-checkbox> <b-form-checkbox value="age">Age</b-form-checkbox> <b-form-checkbox value="isActive">Active</b-form-checkbox> </b-form-checkbox-group> </b-form-group> </b-col> <b-col sm="5" md="6" class="my-1"> <b-form-group label="Per page" label-for="per-page-select" label-cols-sm="6" label-cols-md="4" label-cols-lg="3" label-align-sm="right" label-size="sm" class="mb-0"> <b-form-select id="per-page-select" v-model="perPage" :options="pageOptions" size="sm"></b-form-select> </b-form-group> </b-col> <b-col sm="7" md="6" class="my-1"> <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" align="fill" size="sm" class="my-0"></b-pagination> </b-col> </b-row> <!-- Main table element --> <b-table :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" :filter="filter" :filter-included-fields="filterOn" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" stacked="md" show-empty small @filtered="onFiltered"> <template #cell(name)="row"> {{ row.value.first }} {{ row.value.last }} </template> <template #cell(actions)="row"> <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1"> Info modal </b-button> <b-button size="sm" @click="row.toggleDetails"> {{ row.detailsShowing ? 'Hide' : 'Show' }} Details </b-button> </template> <template #row-details="row"> <b-card> <ul> <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li> </ul> </b-card> </template> </b-table> <!-- Info modal --> <b-modal :id="infoModal.id" :title="infoModal.title" ok-only @hide="resetInfoModal"> <pre>{{ infoModal.content }}</pre> </b-modal> </b-container> </template> </div>

Answer 3

這是你想要的？

 new Vue({ el: "#app", data: { Items: [ {Name: 'Lorem ipsum'}, {Name: 'consectetur'}, {Name: 'adipisicing.'} ], search: '' }, computed: { filteredItems() { return this.Items.filter(item => item.Name.toLowerCase().includes(this.search.toLowerCase())) } } })

 .item { border: solid black 2px; padding: 10px; margin: 10px; } .search { border: solid black 2px; padding: 10px; margin: 10px; } p { padding: 10px; }

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <p>Found {{filteredItems.length}} items</p> <input class="search" type="text" placeholder="Search" v-model="search"> <div class="item" v-for="item in filteredItems">{{item.Name}}</div> </div>