vue.js - vue-table-2 的自定义搜索框

Question

使用 Vue 表 2，我不想使用默认的搜索/过滤器输入和 Records 下拉菜单。即我不想在下图中使用控件：

相反，我想在表格外创建自己的输入框。我能够隐藏包含上面图像的默认行。但是，添加我自己的输入框后 - 示例：

    <input type="text" v-model="searchTerm" v-on:keyup='filterResult()' />,  

如何在filterResult()方法中触发过滤器事件来处理我的过滤器请求？

 data(){
        return {
            searchTerm:'',
            customFilters: [{
                name: 'mysearch',
                callback: function (row, query) {
                    return row.name[0] == query;
                }
            }],
        },
    },
    methods:{
        filterResult(){
           //how to trigger event to filter result using the searchTerm
        }
    }

Answer 1

给定这样的表定义，其中tableoptions它包含您应用到表的选项的对象（这些必须与他们的文档匹配），在这种情况下，我只是添加customFilters，但您可能有columns，headings或其他

<v-client-table :options="tableoptions">
</v-client-table>

在他们的文档中，它说您应该使用它来触发自定义过滤器

Event.$emit('vue-tables.filter::alphabet', query);

但它没有说它Event是VueTables.Event，所以你需要将你的 js 更新为以下内容：

data() {
    return {
      searchTerm: '',
      tableoptions: {
        customFilters: [{
          name: 'mysearch',
          callback: function(row, query) {
            //this should be updated to match your data objects
            return row.name[0] == query; 
          }
        }]
      },
    },
  },
  methods: {
    filterResult() {
      VueTables.Event.$emit('vue-tables.filter::mysearch', query);
    }
  }