【Vuetify】v-data-tableの特定の列のヘッダーをv-slotを使用してテキスト以外の要素を入れる方法

概要

基本的なv-data-tableの機能は使用したいけど、特定の列のヘッダーをテキスト以外の要素を入れるなどのカスタムをしたい場合に。
ただ、v-slotの指定の仕方はどうだったかしら？となりがち(;^ω^)

覚え書きも兼ねてコードサンプルを記事に。

script側のサンプル

// TypeScript形式で書いています。TypeScriptではない場合DataTableHeader[]の型定義は不要
headers: DataTableHeader[] = [
  {
    text: 'デザート (100g serving)',
    align: 'start',
    sortable: false,
    value: 'name',
  },
  { text: '(カスタムするヘッダー部分です)', value: 'hoge' }, // この行のvalueをtemplate側で使います
  { text: '脂肪 (g)', value: 'fat' },
]

// itemsのデータは省略します・・・。

template側のサンプル

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    class="elevation-1"
    hide-default-footer
    disable-pagination
  >
    // 次の行に注目   ※ "={ item }" の部分はおまけの知識です。特定の列のヘッダーをslotで差し替えには関係ない。
    <template v-slot:header.hoge="{ item }"> 
      // ----- ここからお好きなようにカスタム！ -----
      <div class="d-flex align-center">
        <v-checkbox
          @change="onChanged(item)"
        ></v-checkbox>
        <span>ほげほげ</span>
        <v-radio></v-radio>
      </div>
      // ----- ここまでお好きなようにカスタム！ -----
    </template>
  </v-data-table>
</template>

コードサンプルの要点

headerオブジェクトのvalueというプロパティの値をv-slot:header.の後に続いて記述するとそのvalueの値を持つ列のヘッダー部分がslotで差し替えられ、自由にカスタムすることができます。