vuetifyの v-data-table からフィルター後の項目を取得する
v-data-tableでフィルターをかけた後の表をCSVなんかでダウンロードしたいときに使える。
v-data-tableのプロパティにref
を追加することが重要。
<v-data-table :headers="headers" :items="desserts" item-key="name" class="elevation-1" :search="search" :custom-filter="filterOnlyCapsText" ref="ref" > <template v-slot:top> <v-text-field v-model="search" label="Search (UPPER CASE ONLY)" class="mx-4"></v-text-field> </template> <template v-slot:body.append> <tr> <td></td> <td> <v-text-field v-model="calories" type="number" label="Less than"></v-text-field> </td> <td colspan="4"></td> </tr> </template> </v-data-table>
表の項目を取得するときはこんな感じ。ref
の部分はさっき属性で設定した名前。
filteredItems
でフィルター後の項目を取得して、それをsortItems
の引数として渡すことでソート後の項目を取得できる。
let items = this.$refs.ref.$children[0].filteredItems; let sorted = this.$refs.ref.$children[0].sortItems(items); console.log(sorted);
以下がソース全体。
一番下にある確認ボタンを押すとコンソールに結果が出されるので開発者ツール開いて確認してください。
See the Pen GRZbwep by のまのま (@choshicure) on CodePen.