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

Question

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

我的问题在于数字列过滤。我想添加范围过滤选项（＆gt;，＆gt; =，＆lt;，＆lt; =，=，之间等）。

我能找到的唯一文件就是：

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

  

服务器端过滤器

     

    

一个。使用customFilters选项按照以下语法声明过滤器：

         

customFilters：[＆＃39;字母＆＃39;，＆＃39;年龄范围＆＃39;]

         

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

  

但我不了解一些事情：

1. 年龄范围＆＃39;年龄范围＆＃39;实施？
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);
   }
}