4

DB からの情報を表すために、サーバー側の vue-tables-2 コンポーネントを使用しています。このテーブルには、数値列、テキスト列、および日付列が含まれています。

私の問題は、数値列のフィルタリングにあります。範囲フィルタリングのオプションを追加したい (>、>=、<、<=、=、between など)。

私が見つけた唯一のドキュメントはこれです：

https://www.npmjs.com/package/vue-tables-2#server-side-filters

サーバー側フィルター

A. 次の構文に従って、customFilters オプションを使用してフィルタを宣言します。

customFilters: ['alphabet','age-range']

B. クライアント コンポーネントと同じ。

しかし、私はいくつかのことを理解していません:

  1. 「年齢範囲」はどこで実装されていますか?
  2. 各列のフィルターはどこで指定しますか?
  3. vuex\ バスを使用する必要がありますか?

誰かが実装を手伝ってくれませんか?

ありがとう

4

1 に答える 1

2

カスタム フィルターは、パッケージのコンシューマーによって実装される外部フィルターです。ただし、スロットを使用してテキスト フィルターの代わりにテーブルに埋め込むことができSlotsます (ドキュメントを参照)。

フィルターはパッケージの外部にあるため、イベント バスまたは Vuex のいずれかを使用して、パッケージがいつ変更されたかをパッケージに通知するのはあなたの責任です。

つまり、パッケージとカスタム フィルター間の唯一のインターフェイスはイベントです。パッケージには、いつ、どのような状況でイベントが発行されるかについての知識や制御はありません。変更を受動的にリッスンし、受け取ったクエリをネイティブのクエリとマージします。

たとえばage-range-filter、イベントを発行するコンポーネントを作成し、列のネイティブ テキスト フィルターchangedを置き換えるとします。age

<v-server-table ... :columns="['name','age']" :options="tableOptions">
<div slot="filter__age">
    <age-range-filter @changed="filter"></age-range-filter>
</div>
</v-server-table>

vue インスタンスで:

data:{
tableOptions:{
   filterable:['name'] // omit 'age' as it will be replaced by your component
   customFilters:['age-range']
  }
},
methods:{
   filter(query) {
     VueEvent.$emit('age-range', query);
   }
}
于 2018-05-29T23:18:50.237 に答える