Vue Tables 2 自定义过滤器不起作用答案

【问题标题】：Vue Tables 2 Custom filter not workingVue Tables 2 自定义过滤器不起作用
【发布时间】：2017-12-05 09:07:13
【问题描述】：

我目前正在处理一个表格，该表格显示来自不同应用程序的日志记录数据。该表显示的数据没有问题，因为这似乎是最容易上手的部分。

现在我需要一个自定义过滤器。如果“LogType”中的值为 1（即异常/错误的日志），此过滤器需要用红色突出显示行。但是，在阅读了他们的文档后，我无法让自定义过滤器工作。和其他关于自定义过滤器的帖子，我可以在 Stackoverflow 上找到一个似乎有修复的地方，但它似乎对我不起作用。（例如Vue Tables 2 - Custom Filters）

关于 Vue 表 2 的文档，可能只是我不明白它们的真正含义。就像使它工作所需的一样。 (vue-tables-2 - Custom filters Documentation)

我觉得我的问题可能是，示例中的过滤器需要通过按下按钮来激活。一旦有数据要过滤，我的需要立即开始。但我完全不确定，因为我无法让自定义过滤器触发我放置在其中的“console.log()”，以查看它返回的数据。

以下代码是我的Vue代码和选项。开头调用的“getErrorLogs(false) 方法”调用了一个 AJAX 调用，该调用返回的数据是馈送到表中的数据，它可以正常工作。

    getErrorLogs(false)

    const ClientTable = VueTables.ClientTable
    const Event = VueTables.Event 

    Vue.use(ClientTable)

    vue = new Vue({
        el: "#vueErrorLogs",
        methods: {
            applyFilter(number) {
                this.selectedNumber = number;
                Event.$emit('vue-tables.filter::exceptions', number);
            }
        },
        data: {
            numbers: ['0','1'],
            selectedNumber: '',
            columns: ['ActionName', 'Message', 'LogTime', 'ID', 'LogType', 'Area', 'ApplicationUser'],
            data: {
                tableData: getData()
            },
            options: {
                headings: {
                    ActionName: 'Action Name',
                    Message: 'View Record',
                    LogTime: 'Log Time',
                    ID: 'ID',
                    LogType: 'Log Type',
                    Area: 'Code Area',
                    ApplicationUser: 'Application User',
                },
                sortable: ['ActionName', 'Message', 'ID', 'LogTime', 'LogType', 'Area', 'ApplicationUser'],
                filterable: ['ActionName', 'Message', 'ID', 'LogType', 'Area', 'ApplicationUser'], //LogTime is missing since datepicker dosent work
                perPage: 20,
                filterByColumn: true,
                toMomentFormat: true,
                orderBy: {
                    column: 'LogTime',
                    ascending: false
                },
                customFilters: [{
                    name: 'exceptions',
                    callback: function (row, query) {
                        console.log("Row: ", row, " Query: ", query)
                        return row.name[0] == query;
                    }
                }]
            }
        }
    });

    function getData() {
        var data = [{}]
        return data;
    }

我这部分代码是用来展示vue表格的HTML代码

<div id="vueErrorLogs">
    <v-client-table :columns="columns" :data="data.tableData" :options="options">
        <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
    </v-client-table>
</div>

更新 1： 到目前为止，我已经能够排除我不能使用 v-bind:class 来设置标签，以便根据需要分配给它们的“成功、危险或信息”的引导类。

更新 2： 我找到了一个解决方案来解决我的问题，即使用引导类为 TR 标签添加颜色，它只是使用 rowClassCallBack 选项并在函数调用内部进行检查，然后返回所需的类的字符串名称。如：

rowClassCallback: function (row) {
                    if (row.LogType == 1)
                        return 'danger'
                    else
                        return 'default'
                },

我仍然不知道为什么我的自定义过滤器不起作用

【问题讨论】：

我正在努力解决完全相同的问题。自定义过滤器不起作用是不正确的。事实上，确实如此，但是如果您查看事件队列，看起来就像在 vue-tables.filter::myfilter 之后触发了另外两个事件：vue-tables.filter::defaultfilter 和 filter::defaultfilter，分别由 <Root> 和 <ClientTable> 发出.所以我想只是我们的自定义过滤器被默认过滤器“覆盖”。有什么线索吗？
此外，在您的情况下，似乎从未调用过 applyFilter 方法。您应该挂钩到默认过滤事件，例如vue-tables.filter::defaultColumnName。您可以通过添加Event.$on('vue-tables.filter::defaultColumnName', (payload) => {vue.applyFilter(payload)}); 来实现

标签： javascript vue.js vuejs2 vue-tables-2

【解决方案1】：

顾名思义，自定义过滤器用于过滤行，而不是更改它们的属性（即在您的情况下添加 tr 匹配行数据的类）
正如@ibanjo 注意到的那样，您从未发出过激活自定义过滤器，这就是它不起作用的原因。
正如您自己发现的那样，正确的选项是 rowClassCallback

【讨论】：