Descriptions

Data-driven description list encapsulation.

Basic Usage

Implement description list by configuring column and passing detail data

<script lang="ts" setup>
const columns = [
  { label: 'Date', prop: 'date' },
  { label: 'Name', prop: 'name' },
  { label: 'Address', prop: 'address' },
]
const detail = {
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
</script>

<template>
  <z-descriptions
    :columns="columns"
    :detail="detail"
  />
</template>

Nested Key-Value

For objects or arrays with nested structure, just configure prop

<script lang="ts" setup>
const columns = [
  { label: 'Date', prop: 'date' },
  { label: 'Name', prop: 'people[0].name' },
  { label: 'Address', prop: 'data.address' },
]
const detail = {
  date: '2016-05-03',
  name: 'Tom',
  data: {
    address: 'No. 189, Grove St, Los Angeles',
  },
  people: [{ name: 'Steven' }],
}
</script>

<template>
  <z-descriptions
    :columns="columns"
    :detail="detail"
  />
</template>

Size, Border, Layout and Alignment

Border

size

align

labelAlign

direction

<script lang="ts" setup>
import { ref } from 'vue'

const columns = [
  { label: 'Date', prop: 'date' },
  { label: 'Name', prop: 'name' },
  { label: 'Address', prop: 'address' },
]
const detail = {
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}

const sizeOptions = [
  { label: 'large', value: 'large' },
  { label: 'default ', value: 'default' },
  { label: 'small', value: 'small' },
]

const alignOptions = [
  { label: 'left', value: 'left' },
  { label: 'center', value: 'center' },
  { label: 'right', value: 'right' },
]

const directionOptions = [
  { label: 'vertical', value: 'vertical' },
  { label: 'horizontal', value: 'horizontal' },
]

const size = ref('default')
const align = ref('center')
const labelAlign = ref('center')
const border = ref(true)
const direction = ref('horizontal')
</script>

<template>
  <div class="flex flex-col">
    <div class="mb-4 flex items-center">
      <span class="mr-4 w-20 inline-block text-right">Border</span>
      <el-switch v-model="border" />
    </div>
    <div class="mb-4 flex items-center">
      <span class="mr-4 w-20 inline-block text-right">size</span>
      <z-radio v-model="size" :options="sizeOptions" type="radio-button" />
    </div>
    <div class="mb-4 flex items-center">
      <span class="mr-4 w-20 inline-block text-right">align</span>
      <z-radio v-model="align" :options="alignOptions" type="radio-button" />
    </div>
    <div class="mb-4 flex items-center">
      <span class="mr-4 w-20 inline-block text-right">labelAlign</span>
      <z-radio v-model="labelAlign" :options="alignOptions" type="radio-button" />
    </div>
    <div class="mb-4 flex items-center">
      <span class="mr-4 w-20 inline-block text-right">direction</span>
      <z-radio v-model="direction" :options="directionOptions" type="radio-button" />
    </div>
    <z-descriptions
      :columns="columns"
      :detail="detail"
      :border="border"
      :align="align"
      :label-align="labelAlign"
      :size="size"
      :direction="direction"
    />
  </div>
</template>

Title and Label

title and label attributes support string and render functions. When you pass string type, if it contains Slot, it will be rendered as Slot

<script lang="ts" setup>
import { h } from 'vue'
const columns = [
  { label: () => h('span', 'Date'), prop: 'date' },
  { label: 'Name', prop: 'name' },
  { label: 'addressSlot', prop: 'address' },
]
const detail = {
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const renderTitle = () => {
  return h('span', 'Custom Title')
}
</script>

<template>
  <z-descriptions
    :columns="columns"
    :detail="detail"
    :title="renderTitle"
    extra="extraSlot"
    border
  >
    <template #addressSlot>
      <span>Custom Address</span>
    </template>
  </z-descriptions>
</template>

Slots

Configure render in columns items, or add slots with detail-[prop] in template to customize content. extra configuration can pass string, render function or use extra slot.

<script lang="ts" setup>
import { h } from 'vue'

const columns = [
  { label: 'Date', prop: 'date', render: data => h('span', `Custom ${data.date}`) },
  { label: 'Name', prop: 'name' },
  { label: 'Address', prop: 'address' },
]
const detail = {
  date: '2016-05-03',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
</script>

<template>
  <z-descriptions
    :columns="columns"
    :detail="detail"
    border
  >
    <template #detail-name="{ item, size }">
      <el-tag :size="size">
        {{ item.name }}
      </el-tag>
    </template>
    <template #extra>
      <span>extra</span>
    </template>
  </z-descriptions>
</template>

z-descriptions Attributes

Attribute	Description	Type	Accepted Values	Default
columns	Description list configuration items	Array	—	—
detail	Detail data	Object	—	—
border	Whether to display with border	boolean	—	false
column	Number of Descriptions Item in one row	number	—	3
direction	Direction of arrangement	string	vertical / horizontal	horizontal
size	Size of the list	string	large / default / small	default
title	Title text, displayed in the upper left	string / () => VNode	—	—
extra	Operation area text, displayed in the upper right	string / () => VNode	—	—

Column Configuration

Attribute	Description	Type	Accepted Values	Default
prop	Corresponding field name in detail	string	—	—
label	Label text	string / (columnItem) => VNode	—	—
span	Number of columns	number	—	1
width	Column width, width of same column in different rows is set by maximum value (if no border, width includes label and content)	string / number	—	—
minWidth	Minimum column width, difference from width is that width is fixed, min-width will distribute remaining width proportionally to columns with min-width set (if no border, width includes label and content)	string / number	—	—
align	Column content alignment (if no border, affects both label and content)	string	left / center / right	left
labelAlign	Column label alignment, if not set, uses content alignment (if no border, use align parameter)	string	left / center / right	—
className	Column content custom class name	string	—	—
labelClassName	Column label custom class name	string	—	—
render	render function	string	—	—