Vueテーブル2カスタムフィルタが機能しない

Question

現在、さまざまなアプリケーションのログデータを表示するテーブルを作成中です。この表は、問題のないデータを示しています。

今私はカスタムフィルタが必要です。このフィルタは、「LogType」の値が1（つまり、例外/ログであるログ）の場合は、赤色の行を強調表示する必要があります。 しかし、ドキュメントから読み込んだら、カスタムフィルタを使用することができませんでした。そして、カスタムフィルターについての他の記事は、私はStackoverflowで見つかるかもしれませんが、修正があるようですが、一見してもうまくいきませんでした。 （例：Vue Tables 2 - Custom Filters）

Vueテーブル2に関するドキュメントは、実際に何を意味するのか分かりません。それを動作させるために必要なものと同じです。 （vue-tables-2 - Custom filters Documentation）

この例のフィルタは、ボタンを押してアクティブにする必要があると私の問題が感じられます。フィルタリングするデータがあるとすぐに鉱山を開始する必要がある場所。しかし、完全にはわかりません。なぜなら、内部に置かれた "console.log（）"を呼び出すためのカスタムフィルタを得ることができないからです。

次のコードは私のVueコードとオプションです。 初めに呼ばれる「getErrorLogs（偽）メソッドは、それが必要として動作し、テーブルにフィードされたデータ、と返し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-バインド使用することができないことを除外することができました：のブートストラップクラスを取得するためにタグを設定するには、クラスを「成功、危険、情報」は、私が望むように割り当てられます。

更新2： 私は、ブートストラップクラスを使ってTRタグに色を追加するという問題を解決する方法を見つけました。単純にrowClassCallBackオプションを使用して、関数呼び出しの中でチェックしてから、クラスの文字列名。以下のような：

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

自分の名前がそれらの属性を変更しない、カスタムフィルタが 行を絞り込むために使用されている暗示するように、私はまだしかし

Answer 1

• なぜ私のカスタムフィルタdosen'tの仕事を知りません（つまり、あなたのケースでは、行データに一致するようにtr クラスを追加してください）
• @ibanjoは、 カスタムフィルタをアクティブにするイベントを決して出さないことに気付きました。
• 自分で考え出したとして、正しいオプションは、私はまったく同じ問題に苦しんでい rowClassCallback