如何为bootstrap-vue 2.0中的列创建动态输入过滤器

Question

我正在尝试在bootstrap-vue 2.0.0-rc.11中为bootstrap-table列创建一些动态过滤器

在我的示例中，我做到了

<b-table class="io-store-list-table table-striped" show-empty hover stacked="md" :items="stores" :fields="storeFields" :current-page="currentPage" :per-page="perPage" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered" empty-filtered-text="{l s='There are no records matching your request' mod='ioweb_slocator'}">

                    <template slot="top-row" slot-scope="data">
                        <th v-for="field in fields">
                            <input v-if="field.filterable" type="text" @click.stop value="" />
                        </th>

                    </template>
                    <template v-for='field in formatted' :slot='field' slot-scope='row'>
                        <span v-html='row.value'></span>
                    </template>
                </b-table>
                <b-row>
                    <b-container>
                        <b-col xs="12" class="my-1 io-pagination">
                            <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0"/>
                        </b-col>
                    </b-container>
                </b-row>
  </b-table>

哪个呈现这样的表

现在，我试图根据在每一列中输入的值来过滤项目。例如，如果我在mypartnername列下方的输入框中键入Partner，我想基于称为partner的行键动态过滤项目，但是我不确定如何实现。

基于公认的答案，我能够创建一个可以帮助我这样的结构。

步骤1：

创建一个属性filteredResults，并将其设置为等于我的未过滤的项目属性

let app = new Vue({
    el: "#app",
    data() {
        return {
            ...            
            stores: stores,
            groups: groups,
            totalRows: stores.length,
            filters: [],
            loop: 0,
            filteredResults: stores,
        }
    },

步骤2

:items插槽中使用的filteredResults

步骤3

创建单个功能来设置过滤器

    methods: {
       ...
        setFilter(property, value) {
            console.log("Filtering");
            this.filters[property] = {};
            this.filters[property].value = value;
            this.filteredResults = this.stores.filter(item => {
                let keep = true;
                // This is a basic equality filter. What I did in the actual code was to have an object with filter functions for each key. If a key was missing, it defaulted to straight equality.
                this.fieldKeys.forEach(key => {
                    keep =
                        keep &&
                        (this.filters[key] === undefined || this.filters[key].value === undefined || this.filters[key].value === "" || item[key].match(this.filters[key].value));
                });
                return keep;
            });
        },

    },

Answer 1

这样的事情怎么样？我不知道我是否正确解决了您的问题。