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 3요소	LhDescriptionsItem[]	[]
sx	sx 레이아웃 단축 프로퍼티	—	—

팁

items의 span이 해당 항목이 가로지르는 열 수 (기본 1) 를 제어합니다. "긴 값이 한 행 전체를 차지"하는 배치에 사용합니다.