VuetifyのData Tablesを使ってみる
The author is trying out Vuetify's Data Tables. This article describe how to set it up and use it with checkboxes. Vuetify Data Table
by JanitorOct 05, 2023
VuetifyのData Table API「v-data-table」を触ってみました。とても楽で便利ですね。
VuetifyのData Table API「v-data-table」を触ってみました。とても楽で便利ですね。
Jump Links
1. v-data-tableを使うための設定
2. スクリプトを書く
1. v-data-tableを使うための設定
1. v-data-tableを使うための設定
バージョンによって違うかもしれませんが、私の場合はそのままでは使えませんでした。vuetifyのlabsにVDataTableが入っていましたので、手動インポートしました。
バージョンによって違うかもしれませんが、私の場合はそのままでは使えませんでした。vuetifyのlabsにVDataTableが入っていましたので、手動インポートしました。
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify( {
ssr: true,
components: {
VDataTable
},
directives,
} )
nuxtApp.vueApp.use(vuetify)
})
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify( {
ssr: true,
components: {
VDataTable
},
directives,
} )
nuxtApp.vueApp.use(vuetify)
})
2. スクリプトを書く
2. スクリプトを書く
テーブルの中でチェックボックスが使えるようだったので使用しています。
テーブルの中でチェックボックスが使えるようだったので使用しています。
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1">
<template v-slot:item.key2="item">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</template>
</VDataTable>
</template>
<style>
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1">
<template v-slot:item.key2="item">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</template>
</VDataTable>
</template>
<style>
</style>
setupの中では、テーブルのヘッダーとテーブルに表示するデータを用意しています。チェックボックスの変化を検知できるように、watchをしています。
templateの中では、VDataTable APIを呼び出しています。列名「title2」にチェックボックスを並べたかったので、「v-slot:item.key2」として、その中でv-checkbox-btnを呼び出しています。チェックボックスの値は、setup内で用意したobjArrのプロパティcbValuesの配列と紐づけました。
表示は下の画像のようになり、チェックボックスをオンオフすると、watchがobjArrの変化を検知して、コンソールに出力されます。
setupの中では、テーブルのヘッダーとテーブルに表示するデータを用意しています。チェックボックスの変化を検知できるように、watchをしています。
templateの中では、VDataTable APIを呼び出しています。列名「title2」にチェックボックスを並べたかったので、「v-slot:item.key2」として、その中でv-checkbox-btnを呼び出しています。チェックボックスの値は、setup内で用意したobjArrのプロパティcbValuesの配列と紐づけました。
表示は下の画像のようになり、チェックボックスをオンオフすると、watchがobjArrの変化を検知して、コンソールに出力されます。
Editors pick
Our other articles
VuetifyのData Tablesを使ってみる
The author is trying out Vuetify's Data Tables. This article describe how to set it up and use it with checkboxes. Vuetify Data Table
by JanitorOct 05, 2023
VuetifyのData Table API「v-data-table」を触ってみました。とても楽で便利ですね。
VuetifyのData Table API「v-data-table」を触ってみました。とても楽で便利ですね。
Jump Links
1. v-data-tableを使うための設定
2. スクリプトを書く
1. v-data-tableを使うための設定
1. v-data-tableを使うための設定
バージョンによって違うかもしれませんが、私の場合はそのままでは使えませんでした。vuetifyのlabsにVDataTableが入っていましたので、手動インポートしました。
バージョンによって違うかもしれませんが、私の場合はそのままでは使えませんでした。vuetifyのlabsにVDataTableが入っていましたので、手動インポートしました。
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify( {
ssr: true,
components: {
VDataTable
},
directives,
} )
nuxtApp.vueApp.use(vuetify)
})
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { VDataTable } from 'vuetify/labs/VDataTable'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify( {
ssr: true,
components: {
VDataTable
},
directives,
} )
nuxtApp.vueApp.use(vuetify)
})
2. スクリプトを書く
2. スクリプトを書く
テーブルの中でチェックボックスが使えるようだったので使用しています。
テーブルの中でチェックボックスが使えるようだったので使用しています。
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1">
<template v-slot:item.key2="item">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</template>
</VDataTable>
</template>
<style>
</style>
<script setup>
var itemsPerPage = -1;
var headers = [
{ title: 'title0', align: 'start', key: 'key0' },
{ title: 'title1', align: 'start', key: 'key1' },
{ title: 'title2', align: 'start', key: 'key2' },
]
var objArr = reactive( { value: [
{ key0: "000", key1: "aaa", key2: "", cbValues: [] },
{ key0: "001", key1: "bbb", key2: "", cbValues: [ false ] },
{ key0: "002", key1: "ccc", key2: "", cbValues: [ true, false ] },
] } );
watch( objArr, async ( after, before ) => {
console.log( objArr );
} );
</script>
<template>
<VDataTable
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="objArr.value"
class="elevation-1">
<template v-slot:item.key2="item">
<span v-for="( cbValue, cbindex ) in objArr.value[ item.index ].cbValues"
style="display: inline-block; width: fit-content;">
<v-checkbox-btn
:label="'CB' + item.index + '_' + cbindex"
v-model="objArr.value[ item.index ].cbValues[ cbindex ]">
</v-checkbox-btn>
</span>
</template>
</VDataTable>
</template>
<style>
</style>
setupの中では、テーブルのヘッダーとテーブルに表示するデータを用意しています。チェックボックスの変化を検知できるように、watchをしています。
templateの中では、VDataTable APIを呼び出しています。列名「title2」にチェックボックスを並べたかったので、「v-slot:item.key2」として、その中でv-checkbox-btnを呼び出しています。チェックボックスの値は、setup内で用意したobjArrのプロパティcbValuesの配列と紐づけました。
表示は下の画像のようになり、チェックボックスをオンオフすると、watchがobjArrの変化を検知して、コンソールに出力されます。
setupの中では、テーブルのヘッダーとテーブルに表示するデータを用意しています。チェックボックスの変化を検知できるように、watchをしています。
templateの中では、VDataTable APIを呼び出しています。列名「title2」にチェックボックスを並べたかったので、「v-slot:item.key2」として、その中でv-checkbox-btnを呼び出しています。チェックボックスの値は、setup内で用意したobjArrのプロパティcbValuesの配列と紐づけました。
表示は下の画像のようになり、チェックボックスをオンオフすると、watchがobjArrの変化を検知して、コンソールに出力されます。
Editors pick
Our other articles