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

Question

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

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

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