2020-04-02から1日間の記事一覧

Vuetifyのdatatableのカラム数を動的に変更する

headersをcomputedにして、filterの条件でカラム数を制御する。 環境 Vuetify 2.1.0 サンプル <template> <v-data-table :headers="headers" :items="items" :options="options" > </v-data-table> <script> export default { computed: { headers() { return [ { text: 'Important', align: 'center', sortable: true, value: 'important', }, { tex…</template>

Vuetifyでレスポンシブなwidth、heightを取得する

以下のプロパティからレスポンシブな値が取得できる。 $vuetify.breakpoint.width $vuetify.breakpoint.height 環境 Vuetify 2.1.0 サンプル <template> <v-data-table :headers="headers" :items="items" :options="options" :height="$vuetify.breakpoint.height - 200" > </v-data-table> </template> 参考 Breakpoints — Vuetify.js