Question

我目前正在研究一个显示来自不同应用程序的日志数据的表。该表显示没有问题的数据，因为这似乎是起床的简单部分。

现在我需要一个自定义过滤器。此过滤器需要突出显示红色的行，如果值为＆＃34; LogType＆＃34;是1（即日志是例外/错误）。但是，在阅读他们的文档后，我无法使自定义过滤器工作。关于自定义过滤器的其他帖子，我可以在Stackoverflow上找到一个似乎有一个修复，但它似乎不适合我。（例如Vue Tables 2 - Custom Filters）

关于Vue表2的文档，可能只是我不明白，它们的真正含义。正如需要它使它工作。（vue-tables-2 - Custom filters Documentation）

我觉得我的问题可能是，按下按钮需要激活示例中的过滤器。一旦有数据需要过滤，我的需要就开始了。但我完全不确定，因为我无法通过自定义过滤器来启动＆＃34; console.log（）＆＃34;我已经放在里面，看看它返回了什么数据。

以下代码是我的Vue代码和选项。在开头调用的＆＃34; 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来设置标签以获得＆＃34;成功，危险或信息的引导类。按我的意愿分配给他们。

更新2： 我已经找到了解决我使用bootstrap类为TR标签添加颜色的问题的解决方案，只需使用rowClassCallBack选项并在函数调用中进行检查，然后返回类的所需字符串名称。如：

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

我仍然不知道为什么我的自定义过滤器无法正常工作

Answer 1

顾名思义，自定义过滤器用于过滤掉行，不要改变他们的属性（即在你的情况下添加tr 用于匹配行数据的类）
正如@ibanjo注意到你从未发出激活该事件的事件自定义过滤器，这就是为什么它不起作用。
正如你自己想出的那样，正确的选择是 rowClassCallback

Vue表2自定义过滤器不起作用

1 个答案: