Javascript Vue表2-自定义筛选器

我正在尝试将其用于Vue 2.1.8

它工作得很好，但我需要使用自定义过滤器根据字段的值等设置一些字段的格式

在选项中，我有：

customFilters: [
{
  name:'count',
  callback: function(row, query) {
    console.log('see me?'); // Not firing this
    return row.count[0] == query;
}
}
]

文件中说我必须这样做：

Using the event bus:

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

但我不知道该把这个放在哪里？我去过很多地方。例如，在我的axios成功回调中，但什么都没有

---

我想这是非常基本的，我应该知道这一点，但我不知道。所以，如果有人能告诉我把那个活动巴士放在哪里，那就太棒了

文档可以更好地描述这一点。这有点难理解

您需要导入vue-tables-2的命名导出

事件

，这样就有了表的事件总线，并在自定义单击处理程序中发出自定义事件

在演示中，它在全局对象上可用。在ES6中，您将按照文档中的说明从“vue-tables-2”导入{ServerTable，ClientTable，Event}

请看一下下面或本文中的字母过滤器演示

该演示类似于您可以找到的vue-tables-1演示小提琴

//Vue.use（VueTables）
const ClientTable=VueTables.ClientTable
const Event=VueTables.Event//import eventbus
console.log（VueTables）；
Vue.use（客户端表）
新Vue({
el:“人”，
方法：{
applyFilter（信函）{
this.selectedLetter=字母；
事件.$emit（'vue-tables.filter:：alphabet'，字母）；
}
},
数据（）{
返回{
字母：[A'，B'，C'，D'，E'，F'，G'，H'，I'，J'，K'，L'，M'，N'，O'，P'，Q'，R'，S'，T'，U'，V'，W'，X'，Y'，Z']，
所选字母：“”，
列：['id'，'name'，'age']，
表格数据：[{
id:1，
姓名：“约翰”，
年龄：“20”
}, {
id:2，
姓名：“简”，
年龄：“24”
}, {
id:3，
姓名：“苏珊”，
年龄：“16”
}, {
id:4，
姓名：“克里斯”，
年龄：“55”
}, {
id:5，
姓名：“丹”，
年龄：“40”
}],
选项：{
//请参阅选项API
自定义筛选器：[{
名称：“字母表”，
回调：函数（行、查询）{
返回行名称[0]==查询；
}
}]
}
}
}
});
#人{
文本对齐：居中；
宽度：95%；
保证金：0自动；
}
氢{
边缘底部：30px；
}
th，
运输署{
文本对齐：左对齐；
}
第n个孩子（n+2），
td:n个孩子（n+2）{
文本对齐：居中；
}
第四个孩子（第二个）{
字体大小：正常；
}
.VueTables\uuuu排序图标{
左边距：10px；
}
.VueTables_uu下拉分页{
左边距：10px；
}
.VueTables\uuu突出显示{
背景：黄色；
字体大小：正常；
}
.VueTables\uuuu可排序{
光标：指针；
}
.VueTables\uuu日期过滤器{
边框：1px实心#ccc；
填充：6px；
边界半径：4px；
光标：指针；
}
.VueTables\uuu过滤器占位符{
颜色：#aaa；
}
.VueTables\uuu列表过滤器{
宽度：120px；
}

{{字母}}
清楚的
我发现这一课对我帮助最大。

总结：
您应该使用
vue events
包发出事件，或者使用Vuex计算属性（推荐）。
您希望在vuetable上使用
：append params=“moreParams”
，这是vuetable2的一项功能，它将与分页值一起附加到
api url
（与这些参数分开）。
我正在使用Vuex，因此我将moreParams作为vuetable的计算属性。它使用
this.$store.getters.moreParams
，这是我的Vuex getter，因为我有多个搜索字段。这是对输入字段处理程序的Vuex提交的反应

    computed: {
      moreParams() {
        return this.$store.getters.moreParams
      },
    },

否则，您可以使用$store.stage.property。我在moreParams上有一块手表，它用新查询刷新表：

    watch: {
      moreParams(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.vuetable.refresh()
        })
      },
    },

隐藏默认筛选器和每页选择框，并定义一个新筛选器“手动\u代理”

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

隐藏，因为没有“插槽”选项可以在默认过滤器和每页选择之间添加新的自定义过滤器，并且默认过滤器也没有太多重复性。下面的示例用于服务器表实现

要全局用于自定义筛选器的方法：

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

为此，我们必须在v-server表上定义ref name，如下所示：

<v-server-table ref="serverTableRef"

适合任何想玩的人。我仍然不知道如何使它与嵌套的单页组件一起工作

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]

<input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)">

            <select v-model="limitFilter"  @change="$refs.serverTableRef.setLimit($event.target.value)" >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
            </select>

customFilters: [{
  name: 'alphabet',
  callback: function(row, query) {
    return row.name[0] == query;
  }
}]