Описания

Представляет элементные данные «ключ-значение» в табличном виде; поддерживаются управление числом колонок и отображением рамки.

Описания

<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	—	—

Совет

span элемента items задаёт число колонок, которые он занимает (по умолчанию 1); используется для вёрстки «длинное значение на всю строку».