2

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

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

至于关于 Vue 表 2 的文档，可能只是我不明白它们的真正含义。就像使它工作所需的一样。( vue-tables-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>

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

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

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

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

4

1 回答 1

1
  • 顾名思义，自定义过滤器用于过滤行，而不是更改其属性（即在您的情况下添加一个tr 类以匹配行数据）
  • 正如@ibanjo 注意到的那样，您永远不会发出激活自定义过滤器的事件，这就是它不起作用的原因。
  • 正如您自己发现的那样，正确的选择是 rowClassCallback
于 2018-01-02T05:24:40.160 回答