最近はAngularからVue.jsに浮気中の8amjpです。Vue.jsめっちゃ楽しいです。
v-data-tableコンポーネントを使う
さて、下記のようなデータがあるとします。
（ちなみにこのデータ、Zabbix APIで取得できるホスト一覧データから抜粋したものです）
[
{
"hostid": "1",
"host": "Server 1",
"description": "サーバ1号機",
"parentTemplates": [
{
"name": "Windows Servers",
"templateid": "1"
},
{
"name": "Web Servers",
"templateid": "2"
}
],
"interfaces": [
{
"interfaceid": "1",
"ip": "192.168.1.1",
"port": "80",
}
]
},
{
....
よくあるタイプのJSONデータですね。parentTemplatesやinterfacesといった項目が配列になっており、その中に複数の子オブジェクトが格納されている……という階層構造になっています。
さて、このデータを、Vuetifyのv-data-tableコンポーネントを使って表示すると、こんな感じになると思います。
<template>
<v-data-table :headers="headers" :items="items" :search="search">
<template v-slot:top>
<v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line/>
</template>
<template v-slot:item.parentTemplates="{ item }">
<div v-for="i in item.parentTemplates" :key="i.templateid">{{ i.name }}</div>
</template>
<template v-slot:item.interfaces="{ item }">
<div v-for="i in item.interfaces" :key="i.interfaceid">{{ i.ip }}:{{ i.port }}</div>
</template>
</v-data-table>
</template>
<script>
export default {
props: ['items'],
data () {
return {
search: '',
headers: [
{
text: 'ホスト名',
value: 'host',
},
{
text: '説明',
value: 'description',
},
{
text: 'テンプレート',
value: 'parentTemplates',
},
{
text: 'インターフェース',
value: 'interfaces',
},
]
}
},
}
</script>
階層構造のデータは、そのままだと表示できないので、item.<name>スロットを使ってv-forですべてのデータを表示したりします。便利ですねー。
カスタムフィルタを使う
さて、ここから本題。
v-data-tableは、データを簡単にフィルタリングするためにsearchプロパティが用意されています。
バインドされたテキストフィールドに文字を入力すると、その文字列が含まれる行のみをフィルタリングできます。よくある機能ではありますが、最初から用意されていると実装もとても簡単。
ところが、です。前述のデータで言うと、hostやdescriptionなどの項目はフィルタリングできるのですが、parentTemplatesやinterfacesの項目に含まれるデータはフィルタリングができません。例えば、「Windows」というキーワードを入力してもヒットしません。
理由はもちろん、文字列じゃないから。さすがに配列の中身までは検索してくれません。
こういう時こそカスタムフィルタの出番です。
標準のフィルタを確認する
まずは、標準のフィルタがどういう動きをしているのか確認します。
function defaultFilter(value, search, item) {
return value != null &&
search != null &&
typeof value !== 'boolean' &&
value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
}
この中のvalueという変数に、JSONデータの「値」の部分が入るんですけど。
値が配列の場合でも、うまい具合に文字列に変換して渡すことで、なんとかなりそうな感じがします。
では実際にやってみましょう。v-data-tableのcustom-filterプロパティに独自のメソッドを追加することで、動作を上書きすることができるんです。
まずはcustom-filterプロパティを追加して、独自のメソッドを指定します。
<v-data-table :headers="headers" :items="items" :search="search" :custom-filter="customFilter">
で、追加したメソッドで、フィルタリングの動作を上書きします。こんな感じで。
methods: {
customFilter (value, search) {
return value != null &&
search != null &&
typeof value !== 'boolean' &&
// value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
(typeof value === 'object' ? value.map(v => v.name).join('\t') : value)
.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
},
},
まず、変数value（=JSONデータの「値」）の型をtypeof演算子で判定します。
で、objectだった場合は配列とみなし、.mapメソッドで配列内のnameプロパティのみを抽出して、タブ文字で連結して単一の文字列にしています。
このように、単一の文字列にしてしまうことで、検索ができるようになります。
（当然ながら、typeofでobjectが返ってきても、配列じゃない場合もあるんですけど。その辺は使用するデータに応じて各自いい感じに処理を分岐してくださいね（丸投げ））
ついでに、interfaces配列内のipプロパティも検索対象に含めたい場合は、こんな感じでどうでしょうか。
(typeof value === 'object' ? value.map(v => v.name || v.ip).join('\t') : value)
.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
完成
完成品はこちらです。わーい。
<template>
<v-data-table :headers="headers" :items="items" :search="search" :custom-filter="customFilter">
<template v-slot:top>
<v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line/>
</template>
<template v-slot:item.parentTemplates="{ item }">
<div v-for="i in item.parentTemplates" :key="i.templateid">{{ i.name }}</div>
</template>
<template v-slot:item.interfaces="{ item }">
<div v-for="i in item.interfaces" :key="i.interfaceid">{{ i.ip }}:{{ i.port }}</div>
</template>
</v-data-table>
</template>
<script>
export default {
props: ['items'],
data () {
return {
search: '',
headers: [
{
text: 'ホスト名',
value: 'host',
},
{
text: '説明',
value: 'description',
},
{
text: 'テンプレート',
value: 'parentTemplates',
},
{
text: 'インターフェース',
value: 'interfaces',
},
]
}
},
methods: {
customFilter (value, search) {
return value != null &&
search != null &&
typeof value !== 'boolean' &&
(typeof value === 'object' ? value.map(v => v.name || v.ip).join('\t') : value)
.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1;
},
},
}
</script>