【问题标题】:Vue-tables-2 detecting which filter was appliedVue-tables-2 检测应用了哪个过滤器
【发布时间】:2026-01-16 18:00:02
【问题描述】:

我正在尝试使用两个过滤器设置基本服务器端vue-tables-2 - 一个是下拉列表,另一个是搜索字段。我无法检测到requestFunction() 中应用了两个过滤器中的哪一个,因此我可以向服务器发送请求。目前,我只是尝试在应用过滤器/更改输入时控制台记录输入过滤器名称和值。

JSFiddle:

https://jsfiddle.net/kbpq5vb3/39/

HTML

<h1 class="vue-title">Vue Tables 2 Demo</h1>

<div id="app">
  <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options"></v-server-table>
</div>

VueTable:

    Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  data: {
    columns: ['name', 'username'],
    options: {
      requestAdapter(data) {
          console.log(data.query); // detect which filter was applied / which input changed
        },
        responseAdapter(resp) {
          return {
            data: resp,
            count: resp.length
          }
        },
        filterByColumn: true,
        filterable: ['name', 'username'],
        listColumns: {
          name: [{
            id: 'ervin',
            text: 'Ervin'
          }, {
            id: 'chelsey',
            text: 'Chelsey'
          }]
        }
    }
  }
});

【问题讨论】:

  • 根据documentationvue-tables.filter / tableName/FILTER 在过滤器更改时触发。
  • 您应该能够在右侧的“事件”选项卡下的 Vue 开发者工具中查看该事件。
  • @Derek 谢谢。是的,我看到了,但是我尝试实现它没有成功,因为我需要在请求适配器中访问该事件并且文档很差,因为它不包含任何有关如何正确使用它的示例。你明白它是如何工作的吗?你能用一个基本的例子来更新小提琴吗?

标签: javascript vue.js vuejs2 vue-tables-2


【解决方案1】:

根据vue-tables-2 documentation

vue-tables.filter/tableName/FILTER 在过滤器更改时触发。

再深入一点,真的就像监听一个事件一样简单:

Vue 开发者工具确实让这类东西易于诊断。现在,您想要收听自定义事件。您可以在 Vue documentation 上了解如何执行此操作。

最后,这是一个显示你如何收听这些事件的工作小提琴:https://jsfiddle.net/kbpq5vb3/55/

希望这会有所帮助!

【讨论】:

  • 感谢德里克的帮助。不幸的是,我真的不清楚这一切仅从文档中是如何工作的。我需要访问请求适配器中的过滤键和值,文档中甚至没有一个实现示例。
  • @AnchovyLegend 给我一些,我会用小提琴给你看
  • @AnchovyLegend 这是一个很好的起点:jsfiddle.net/kbpq5vb3/55
  • 感谢@Derek 的帮助,它最终比我预期的要简单得多。我想知道我们是否可以在应用 listenTo 时以某种方式调用请求适配器..