Vuetifyのデータテーブルでshow-selectで描画されるチェックボックスにwidthを設定する方法

1 min read読了の目安(約1600字

Vuetifyのデータテーブルshow-selectpropsを渡すと各列にチェックボックスを付与することができます。
この列にwidthを設定する方法がググってもあまり出てこなかったので備忘録です。

結論としてはhaederspropsにvalue: 'data-table-select'の項目を追加することで設定できます。

<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="desserts"
    item-key="name"
    show-select
    class="elevation-1"
  >
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        headers: [
	 // 以下を追加
	 {
            text: '',
            value: 'data-table-select',
            width: 1000
          },
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
	  // 以下省略
        ],
      }
    },
  }
</script>

チェックボックスの列の長さが変更できています。

この他にも、通常のヘッダーに渡せるオプションをは基本的に渡せます。

https://vuetifyjs.com/ja/api/v-data-table/#props-headers