如何在 vue-tables-2 服务器端添加范围过滤器

Question

我正在使用服务器端的 vue-tables-2 组件来表示来自数据库的信息。此表包含数字列、文本列和日期列。

我的问题是数字列过滤。我想为范围过滤添加选项（>、>=、

我能找到的唯一文档是：

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

服务器端过滤器

A.使用 customFilters 选项来声明你的过滤器，语法如下：

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

B.与客户端组件中的相同。

但我不明白一些事情：

1. “年龄范围”在哪里实施？
2. 在哪里指定每列的过滤器？
3. 我必须使用 vuex\ 总线吗？

有人可以帮我实现吗？

谢谢

Answer 1

自定义过滤器是包的使用者实现的外部过滤器。但是，它们可以嵌入到表格中，而不是使用槽的文本过滤器（请参阅Slots 文档）。

由于过滤器在包外部，因此您有责任使用事件总线或 Vuex 通知包何时发生更改。

换句话说，包和自定义过滤器之间的唯一接口就是事件。包不知道或控制何时或在何种情况下发出事件。它被动地监听变化，并将接收到的查询与本地查询合并。

例如，假设您编写了一个发出 changed 事件的 age-range-filter 组件，并且您希望它替换 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);
   }
}