ビューテーブル2 - カスタムフィルタ

Question

このhttps://github.com/matfish2/vue-tables-2をVue 2.1.8で使用しようとしています。

そして、それは完璧に働いていますが、私は彼らの値に基づいていくつかのフィールドをフォーマットするカスタムフィルタを使用する必要があるなどのオプションで

私はこれ持っている：それは私が持っていると言うドキュメントで

customFilters: [ 
{ 
    name:'count', 
    callback: function(row, query) { 
    console.log('see me?'); // Not firing this 
    return row.count[0] == query; 
} 
} 
] 

をこれを行う：

Using the event bus: 

Event.$emit('vue-tables.filter::count', query); 

私はこれをどこに置くべきかわからないのですか？私は多くの場所を試しました。例えば、私のaxiosの成功のコールバックでは何もない。

これは非常に基本的なことですが、私はこれを知っておくべきですが、私はそうではありません。だから誰かが私にそのイベントを置く場所を教えてもらえれば、バスのスタッフはすばらしくなるだろう！

Answer 1

ドキュメントはこれをよりよく記述することができます。理解するのはちょっと難しいです。

vue-tables-2という名前のエクスポートEventをインポートする必要があるため、テーブルのイベントバスがあり、カスタムクリックハンドラにカスタムイベントを出力します。

デモではグローバルオブジェクトで利用できます。 ES6では、import {ServerTable, ClientTable, Event} from 'vue-tables-2';

と書かれている通りにインポートします。以下のアルファベットフィルタのデモをご覧ください。fiddle。

デモは、hereというvue-tables-1のデモ・フィドルに似ています。

// Vue.use(VueTables) 
 
const ClientTable = VueTables.ClientTable 
 
const Event = VueTables.Event // import eventbus 
 

 
console.log(VueTables); 
 
Vue.use(ClientTable) 
 

 
new Vue({ 
 
    el: "#people", 
 
    methods: { 
 
    applyFilter(letter) { 
 
     this.selectedLetter = letter; 
 
     Event.$emit('vue-tables.filter::alphabet', letter); 
 
    } 
 
    }, 
 
    data() { 
 
    return { 
 
     letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], 
 
     selectedLetter: '', 
 
     columns: ['id', 'name', 'age'], 
 
     tableData: [{ 
 
     id: 1, 
 
     name: "John", 
 
     age: "20" 
 
     }, { 
 
     id: 2, 
 
     name: "Jane", 
 
     age: "24" 
 
     }, { 
 
     id: 3, 
 
     name: "Susan", 
 
     age: "16" 
 
     }, { 
 
     id: 4, 
 
     name: "Chris", 
 
     age: "55" 
 
     }, { 
 
     id: 5, 
 
     name: "Dan", 
 
     age: "40" 
 
     }], 
 
     options: { 
 
     // see the options API 
 
     customFilters: [{ 
 
      name: 'alphabet', 
 
      callback: function(row, query) { 
 
      return row.name[0] == query; 
 
      } 
 
     }] 
 
     } 
 
    } 
 
    } 
 
});

#people { 
 
    text-align: center; 
 
    width: 95%; 
 
    margin: 0 auto; 
 
} 
 
h2 { 
 
    margin-bottom: 30px; 
 
} 
 
th, 
 
td { 
 
    text-align: left; 
 
} 
 
th:nth-child(n+2), 
 
td:nth-child(n+2) { 
 
    text-align: center; 
 
} 
 
thead tr:nth-child(2) th { 
 
    font-weight: normal; 
 
} 
 
.VueTables__sort-icon { 
 
    margin-left: 10px; 
 
} 
 
.VueTables__dropdown-pagination { 
 
    margin-left: 10px; 
 
} 
 
.VueTables__highlight { 
 
    background: yellow; 
 
    font-weight: normal; 
 
} 
 
.VueTables__sortable { 
 
    cursor: pointer; 
 
} 
 
.VueTables__date-filter { 
 
    border: 1px solid #ccc; 
 
    padding: 6px; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
} 
 
.VueTables__filter-placeholder { 
 
    color: #aaa; 
 
} 
 
.VueTables__list-filter { 
 
    width: 120px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="people"> 
 
    <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}"> 
 
    {{letter}} 
 
    </button> 
 
    <button class="btn btn-default" @click="applyFilter('')"> 
 
    clear 
 
    </button> 
 
    <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table> 
 
</div>