Vue Tables 2 Пользовательский фильтр не работает

Question

В настоящее время я работаю над таблицей, которая отображает данные регистрации из разных приложений. В таблице приведены данные без проблем, поскольку, казалось бы, было легче вставать.

Теперь мне нужен пользовательский фильтр. Этот фильтр должен выделять строки красным цветом, если значение в "LogType" равно 1 (т.е. журналы, которые являются исключениями / ошибками). Однако я не смог заставить работать пользовательский фильтр после прочтения их документации. И другие посты о пользовательских фильтрах я мог найти в Stackru, где, кажется, есть исправление, но, похоже, оно мне не помогло. (например, таблицы 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;
    }

Эта часть моего кода является HTML-кодом, используемым для отображения таблицы VUE

<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: класс, чтобы установить теги, чтобы получить классы начальной загрузки "Успех, опасность или Информация", назначенные им, как я хочу.

Обновление 2: я нашел решение моей проблемы добавления цвета в теги TR с помощью классов начальной загрузки, было просто использовать параметр rowClassCallBack и выполнить проверку внутри вызова функции, а затем вернуть искомое имя строки класса. такие как:

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

Я до сих пор не знаю, почему мой пользовательский фильтр не работает, однако

Answer 1

• Поскольку их имя подразумевает, что пользовательские фильтры используются для фильтрации строк, а не для изменения их атрибутов (т.е. в вашем случае добавление trкласс для сопоставления данных строки)
• Как заметил @ibanjo, вы никогда не генерируете событие, активирующее пользовательский фильтр, поэтому оно не работает.
• Как вы сами выяснили, правильный вариант былrowClassCallback