如何在 v-client-table 中获取搜索到的文本？

Posted 2023-02-23

【中文标题】如何在 v-client-table 中获取搜索到的文本？

【英文标题】：How to get the searched text in v-client-table?

【发布时间】：2021-10-31 15:31:55

【问题描述】：

我正在尝试在 v-client-table 中创建自定义列过滤器。

https://codepen.io/pydev/pen/BaZKgpR

    options: 
      dateColumns: ['birth_date'],
      filterable: ['name','manufacturer', 'birth_date'],  
      headings: 
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
      ,

我正在尝试对“名称”列过滤器进行一些调整。

我试图获取在“名称”搜索字段中输入的文本，以便模仿 customFilter，但无法找到获取搜索文本的方法。

我严格要求将搜索框保留在列过滤器中。

提前致谢。

【参考方案1】：

vue-tables 组件不公开 API 来读取过滤器值。它分派vue-tables.filtered 事件，但只有与查询匹配的结果项作为参数。查询本身不可访问。 Here are the details

也许值得向作者提出一个问题，用query 来扩展这个事件。

您仍然可以破解组件，并使用此事件来了解输入的值何时像这样更改（ready 方法）。但这显然很hacky。

  ready: function() 
    // ... other things
    this.$on('vue-tables.filtered', function(event) 
      console.log(this.$el.querySelector('.VueTables__name-filter-wrapper input').value);
    );

  ,