Descriptions 記述リスト

項目化されたキーと値の情報をテーブル形式で表示します。列数と罫線の制御をサポートします。

記述リスト

<template>
  <div class="demo-col">
    <LhDescriptions title="溪山行旅図 · 著録情報" :column="2" border :items="items" />
    <LhDescriptions title="溪山行旅図 · 罫線なし" :column="3" :items="itemsPlain" />
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { label: '作者', value: '範寛' },
      { label: '年代', value: '北宋' },
      { label: '材質', value: '絹本水墨' },
      { label: '収蔵', value: '台北故宮博物院', span: 2 },
    ],
    itemsPlain: [
      { label: '作者', value: '範寛' },
      { label: '年代', value: '北宋' },
      { label: '材質', value: '絹本水墨' },
    ],
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
title	タイトル	string	''
column	一行あたりに表示する項目の列数	number	3
border	罫線を表示	boolean	false
items	項目リスト。label / value / span の三つ組	LhDescriptionsItem[]	[]
sx	sx によるレイアウト省略記法	—	—

ヒント

items の span はその項目がまたぐ列数を制御します（デフォルトは 1）。「長い値を一行全体に占めさせる」組版に使います。