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

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