Javascript Vue表2自定义筛选器不工作

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

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

至于关于Vue表2的文档，可能只是我不理解它们的真正含义。就像在需要什么来让它工作一样。（）

我觉得我的问题可能是，示例中的过滤器需要通过按下按钮来激活。当有数据要过滤时，我需要立即启动。但我完全不确定，因为我无法让自定义筛选器启动我放在其中的“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>

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

顾名思义，自定义过滤器用于向下过滤 行，不更改其属性（即在您的情况下添加

tr

类以匹配行数据）

正如@ibanjo所注意到的，您从未发出激活 自定义过滤器，这就是它无法工作的原因

正如你自己所想，正确的选择是

rowClassCallback

---

我遇到了完全相同的问题。自定义筛选器不起作用不是真的。事实上，它起作用了，但是如果您查看事件队列，它看起来是这样的，在

vue表之后。filter:：myfilter

，会触发另外两个事件：

vue表。filter:：defaultfilter

和

filter:：defaultfilter

，e分别由

和

提交。因此，我猜我们的自定义过滤器会被“覆盖”“默认情况下。有什么线索吗？而且，在您的例子中，

applyFilter

方法似乎从未被调用过。您应该挂钩到默认筛选事件，类似于

vue tables.filter:：defaultColumnName

。您可以通过添加

Event.$on（'vue-tables.filter:：defaultColumnName'，（有效负载）=>{vue.applyFilter（有效负载）}）来实现这一点
rowClassCallback: function (row) {
                    if (row.LogType == 1)
                        return 'danger'
                    else
                        return 'default'
                },