最終更新: 2024/12/22 17:43:23
Vuetify3のVDataTableコンポーネントのデータ表示をしていたのですが、列幅を一定にしてはみ出す文字列は「…」で表示したいなと思い、加工する方法を調べた備忘録です!!
テスト | テスト | テスト |
---|---|---|
aaaaaa | bbbbbb | ccc...←表示形式にしたい! |
以下コードです!
<script>
const header= [{
address :{
title: '住所',
align: 'start',
key: 'address',
value: 'address',
width: 130,
}
}]
</script>
<VDataTable
v-if="items.length"
v-model:page="page"
v-model:items-per-page="itemsPerPage"
:headers="headers"
:items="items"
:custom-key-sort="customKeySort"
hide-default-footer
>
<template #[`item.address`]="{ item }">
<div class="text-overflow" style="max-width: 130px">
{{ item.address }}
</div>
</template>
</VDataTable>
<style>
.text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
今回の肝はVDataTableにv-slotでテーブルデータを渡すこととCSSの設定です。
上記のコードは"v-slot"を省略して"#"で表記しています。slotにprops.key名={props}の形を渡すとtd内をカスタマイズできます!"props"の部分は任意の文字列に変更できます。上記の場合はitemにしています。
ここではheaderで設定したkeyをメソッドにして渡しています。
おそらくVDataTableにheaderとitems(配列)を渡すと設定したkeyをitemsから取得してくれるんだと思います(調べている最中です)
slot内では渡したデータの情報を好きな形に加工できます。今回はCSS設定をした<dev>で括っています。
ボタンにしたり、動的に変更できる文字にもできるみたいです。
.text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
text-overflowは文字が要素からはみ出した時3点リーダーを表示するCSSで今回の最重要です。
overflow:hiddenと必ずセットで使用します。
overflowは要素から文字がはみ出す場合、要素を拡張せずに文字をそのまま表示するCSSです。
white-spaseは改行をさせないためのCSSです。
以上、簡単にですが実装の備忘録でした〜!