Как добавить фильтр диапазона в серверную часть vue-tables-2

Question

Я использую компонент vue-tables-2 на стороне сервера для представления информации из БД.Эта таблица содержит числовые столбцы, текстовые столбцы и столбцы даты.

Моя проблема связана с фильтрацией числовых столбцов.Я хочу добавить опцию для фильтрации диапазона (>,> =, <, <=, =, между и т. Д.). </p>

Единственная документация, которую я смог найти, это:

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

Фильтры на стороне сервера

A.используйте опцию customFilters для объявления ваших фильтров, следуя следующему синтаксису:

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

B.так же, как в клиентском компоненте.

Но я не понимаю нескольких вещей:

1. Где реализован «возрастной диапазон»?
2. Где указать фильтр для каждого столбца?
3. Должен ли я использовать vuex \ bus?

Может кто-нибудь помочь мне с реализацией?

Спасибо

Answer 1

Пользовательские фильтры - это внешние фильтры, реализованные потребителем пакета.Однако они могут быть встроены в таблицу вместо текстового фильтра с использованием слотов (см. Документацию 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);
   }
}