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

Question

使用Vue表2，我不想使用默认的搜索/过滤器输入，并且“记录”下拉列表也没有。即我不想在下图中使用控件：

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

    <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>

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

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