javascript - Vue Tables 2自定义过滤器不起作用

Question

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

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

至于有关 Vue tables 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:我找到了解决我的问题的解决方案，即使用 Bootstrap 类向 TR 标签添加颜色，它只是使用 rowClassCallBack 选项并在函数调用内部进行检查，然后返回类的所需字符串名称。例如:

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

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

Answer 1

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