最終更新: 2024/12/22 17:43:23

【Vuetify3】VTableDateのテーブルデータを3点リーダーで表示する方法

Vue / Nuxt
2023年09月26日

はじめに

Vuetify3のVDataTableコンポーネントのデータ表示をしていたのですが、列幅を一定にしてはみ出す文字列は「…」で表示したいなと思い、加工する方法を調べた備忘録です!!

テスト

テスト

テスト

aaaaaa

bbbbbb

ccc...←表示形式にしたい!

CSSで実装する方法

以下コードです!

<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>で括っています。
ボタンにしたり、動的に変更できる文字にもできるみたいです。

CSSについて

.text-overflow {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

text-overflow

text-overflowは文字が要素からはみ出した時3点リーダーを表示するCSSで今回の最重要です。
overflow:hiddenと必ずセットで使用します。

overflow

overflowは要素から文字がはみ出す場合、要素を拡張せずに文字をそのまま表示するCSSです。

white-space

white-spaseは改行をさせないためのCSSです。

以上、簡単にですが実装の備忘録でした〜!