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

Question

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

我的问题是数字列过滤。我想添加用于范围过滤的选项(>、>=、<、<=、=、between等)。

我能找到的唯一文档是：

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

服务器端过滤器

A.使用customFilters选项声明您的筛选器，遵循以下语法：

customFilters：‘字母表’，‘年龄范围’

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

但有几件事我不明白：

1. 在何处实现‘年龄范围’？
2. 在何处指定每列的筛选器？
3. 是否必须使用vuex\ bus?

有人能帮我实现一下吗？

谢谢

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