Question

我正在尝试在vue（bootstrapVue）中创建一个表，并且我希望同时使用表格上方的下拉菜单应用多个过滤器。但是当我在第二个下拉列表中选择一个选项时，第一个选项会被重置。这可能很容易，但我是初学者，我不知道该怎么做......

这是我的表：

<b-table show-empty
         stacked="md"
         responsive
         hover:true
         :items="items"
         :fields="fields"
         :current-page="currentPage"
         :per-page="perPage"
         :filter="filter"
         :sort-by.sync="sortBy"
         :sort-desc.sync="sortDesc"
         @filtered="onFiltered">

这是我的下拉列表：

<b-form-select v-model="filter" :options="city" class="mb-3" ></b-form-select>

我认为过滤器选项是内置函数。解决方案是用另一个名称对其进行公布，并将其用于下一个下拉列表吗？

我的数据如下：

const items = [{name: 'Der Kotti', kategorie: 'Spielplatz', stadt: 'Hamburg', straße: 'Kottwitzstraße', datum: moment('2018/02/15').format('D.M.Y'), tageszeit: 'Morgens & Nachmittags', alter: 'Alle Altersgruppen', link: '', drinnen: 'Draußen', gruppe: '', sprache: '', regelmäßigkeit: ''}]

我在不同的项目中使用了类似的东西：

$('#table-filter-category').on('change', function(){
  table.search(this.value).draw();
});

但我不知道如何在当前项目中使用这种方法......

以下是我的所有下拉过滤器：

    <b-row>
  <b-col lg="2" offset-lg="2" md="6" class="my-1">
    <h5 style="text-align:left">Stadt:</h5>
    <b-form-select v-model="filter" :options="city" class="mb-3" ></b-form-select>
  </b-col>
  <b-col lg="2" md="6" class="my-1">
    <h5 style="text-align:left">Kategorie:</h5>
    <b-form-select v-model="filter" :options="cat" class="mb-3" ></b-form-select>
  </b-col>
  <b-col lg="2" md="6" class="my-1">
    <h5 style="text-align:left">Tageszeit:</h5>
    <b-form-select v-model="filter" :options="daytime" class="mb-3" ></b-form-select>
  </b-col>
</b-row>

编辑：

好的，过了一会儿，我想出了如何编写自己的过滤功能。我把它放在我的.vue文件中的'computed：'部分。

filteredData: function(){
  let filterData = this.data

  if (this.checkCity.length > 0){
    filterData = filterData.filter(data => {
      return this.checkCity.includes(data.stadt)
    })
  }

  return filterData
}

data是我的原始数据输入，filteredData是过滤后的数据，checkCity例如是我要过滤的key复选框。 checkCity用于复选框的v-model。

vue js

0 个答案: