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

Posted 2023-02-22

【中文标题】如何为 bootstrap-vue 2.0 中的列创建动态输入过滤器

【英文标题】：how to create dynamic input filters for columns in bootstrap-vue 2.0

【发布时间】：2020-06-23 14:42:29

【问题描述】：

我正在尝试在 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>

呈现这样的表格

现在我正在尝试根据每列中输入的值过滤项目。例如，如果我在Partner 列下方的输入框中键入mypartnername，我想根据名为partner 的行键动态过滤项目，但我不确定如何处理这个问题。

根据接受的答案，我能够创建一个像这样帮助我的结构。

第 1 步：

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

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

第二步

在:items 槽中使用了过滤结果

第三步

创建一个函数来设置过滤器

    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;
            );
        ,

    ,

【参考方案1】：

这样的事情呢？我不知道我是否解决了你的问题。

<input v-if="field.filterable" @onchange="setFilter(field.property, $event.target.value)" type="text" @click.stop />

在 setFilter 函数中，您可以执行以下操作：

setFilter(property, value) 
    this.filters[property].value = value

使用计算属性获取结果

filteredResults()
   return users = this.users.filter((item) => 
      for (var key in this.filters) 
        if (item[key].value === undefined || item[key].value != filter[key])
          return false;
      
      return true;
    

我不知道它是否有效，无法测试它。我很好奇这里的解决方案。

【讨论】：

我一定会尝试并告诉你:)

您的回答对找到一种工作方式非常有帮助，因此我可以继续，但在我的情况下它并没有立即起作用。让我指出我面临的问题。 1. 即使在表的:items 槽中设置filteredResults 变量，计算属性也不会在过滤时自动强制重绘引导表。 2. 比较键的功能不太有效，因为 item[key] 未定义并且在解析值时抛出错误。我写了一个适合我的情况，所以一切都很好:) 我会接受它，因为它真的很有帮助

很好的反馈，很高兴你得到它。