Descripciones

Presenta información estructurada en pares clave-valor con formato de tabla; permite controlar el número de columnas y el borde.

Descripciones

<template>
  <div class="demo-col">
    <LhDescriptions title="Viaje por las montañas y los arroyos · Ficha catalográfica" :column="2" border :items="items" />
    <LhDescriptions title="Viaje por las montañas y los arroyos · Sin borde" :column="3" :items="itemsPlain" />
  </div>
</template>

<script>
export default {
  data: () => ({
    items: [
      { label: 'Autor', value: 'Fan Kuan' },
      { label: 'Época', value: 'Dinastía Song del Norte' },
      { label: 'Soporte', value: 'Seda con tinta china' },
      { label: 'Colección', value: 'Museo Nacional del Palacio, Taipéi', span: 2 },
    ],
    itemsPlain: [
      { label: 'Autor', value: 'Fan Kuan' },
      { label: 'Época', value: 'Dinastía Song del Norte' },
      { label: 'Soporte', value: 'Seda con tinta china' },
    ],
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
title	Título	string	''
column	Número de columnas de elementos por fila	number	3
border	Muestra el borde	boolean	false
items	Lista de elementos; la tripleta label / value / span	LhDescriptionsItem[]	[]
sx	Propiedades de layout abreviadas	—	—

Consejo

El span de items controla cuántas columnas ocupa el elemento (1 por defecto), para disponer los valores largos en una fila completa.