1

vue (bootstrapVue) にテーブルを作成しようとしていますが、テーブルの上のドロップダウン メニューを使用して一度に複数のフィルターを適用したいと考えています。しかし、2 番目のドロップダウンでオプションを選択すると、最初のドロップダウンがリセットされます。これはおそらく非常に簡単ですが、私は初心者であり、その方法がわかりません...

これは私のテーブルです：

<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ます。

4

0 に答える 0