Vuetifyのv-data-tableで、テーブルのヘッダーで改行する方法をご紹介します。
通常のhtmlでは、thタグの中で<br />を使えば済みますがv-data-tableでは、標準的にはpropsに配列(またはオブジェクト)を渡すためこの方法が使えません。
目次
結論:headerスロットを使う
公式ドキュメントを見れば分かるのですが、headerスロットが用意されています。
以下のように書けば、thの中で改行できます。
<v-data-table
:items="items"
>
<template v-slot:header>
<thead>
<th>ID</th>
<th>名前</th>
<th>緊急<br />連絡先</th>
</thead>
</template>
</v-data-table>
CSS以外では調べてもあまり出てこなかったため、記事にしました。
コメント