javascript - 如何在 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\ 总线吗？

有人可以帮我实施吗？

谢谢

标签： javascriptvue.jsvuejs2vue-tables-2

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);
   }
}