1

我试图在 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 文件的“计算：”部分。

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复选框中使用。

4

0 回答 0