Descriptions

Display multiple fields in list form

Use

Basic Use

When columns is bound to a reactive array, changes in the array will affect Descriptions changes. If you don’t need a dynamic Descriptions, it is recommended to bind an ordinary array.

Date2016-05-03

NameTom

AddressNo. 189, Grove St, Los Angeles

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

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  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',
    }

    return {
      columns,
      detail,
    }
  },
})
</script>

Intellisense

Use the defineDescriptionsColumns to make it easier to define columns

Date2016-05-03

NameTom

AddressNo. 189, Grove St, Los Angeles

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

<script>
import { defineComponent } from 'vue'
import { defineDescriptionsColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineDescriptionsColumns([
      { 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',
    }

    return {
      columns,
      detail,
    }
  },
})
</script>

Nested value

Support for get the objects or arrays with nested structures value, only need to configure the prop

Aa value

Bbreak nested value

Cnested value d in b

Dnested value in array

<template>
  <pro-descriptions
    :columns="columns"
    :detail="detail"
    :column="1"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { defineDescriptionsColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineDescriptionsColumns([
      { label: 'A', prop: 'a' },
      { label: 'B', prop: 'b.c' },
      { label: 'C', prop: 'b.d' },
      { label: 'D', prop: 'd[0].e' },
    ])
    const detail = {
      a: 'a value',
      'b.c': 'break nested value',
      b: {
        c: 'nested value c in b',
        d: 'nested value d in b',
      },
      d: [{ e: 'nested value in array' }],
    }

    return {
      columns,
      detail,
    }
  },
})
</script>

Alignment

<template>
  <pro-form
    v-model="form"
    :columns="formColumns"
    :menu="menu"
    label-width="100px"
  />
  <pro-descriptions
    :columns="columns"
    :detail="detail"
    :border="form.border"
    :align="form.align"
    :label-align="form.labelAlign"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  defineFormColumns,
  defineFormMenuColumns,
  defineDescriptionsColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const form = ref({
      border: true,
      align: 'right',
      labelAlign: 'left',
    })
    const alignment = [
      { value: 'left', label: 'left' },
      { value: 'center', label: 'center' },
      { value: 'right', label: 'right' },
    ]
    const formColumns = defineFormColumns([
      {
        label: 'border',
        prop: 'border',
        component: 'el-switch',
      },
      {
        label: 'align',
        prop: 'align',
        component: 'pro-radio-button',
        props: { data: alignment },
      },
      {
        label: 'label-align',
        prop: 'labelAlign',
        component: 'pro-radio-button',
        props: { data: alignment },
      },
    ])
    const menu = defineFormMenuColumns({
      submit: false,
      reset: false,
    })
    const columns = defineDescriptionsColumns([
      { 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',
    }

    return {
      form,
      formColumns,
      menu,
      columns,
      detail,
    }
  },
})
</script>

Slots

Tip

Starting from 1.2.0, the [prop] related slots need to be prefixed with detail- to use

Directly add some slot with detail-[prop] in the template

title

Date

2016-05-03

Name:

Tom

Address

No. 189, Grove St, Los Angeles

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

<script>
import { defineComponent, h } from 'vue'
import { defineDescriptionsColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineDescriptionsColumns([
      {
        label: 'Date',
        prop: 'date',
        render: (row) => h('em', row.date),
        renderLabel: (item) => h('em', item.label),
      },
      { label: 'Name', prop: 'name' },
      { label: 'Address', prop: 'address' },
    ])
    const detail = {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    }

    return {
      columns,
      detail,
    }
  },
})
</script>

TypeScript

The function defineDescriptionsColumns supports passing in a Generics type to infer the value of prop

Date2016-05-03

NameTom

AddressNo. 189, Grove St, Los Angeles

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

<script setup lang="ts">
import { defineDescriptionsColumns } from 'element-pro-components'

interface DescriptionsItem {
  date: string
  name: string
  address: string
}

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

Props

Name	Description	Type	Options	Default
columns	to generate descriptions list, reference `columns`	array	-	-
detail	detail data of display	object	-	-
border	with or without border	boolean	-	false
column	numbers of `Descriptions Item` in one line	number	-	3
direction	direction of list	string	vertical / horizontal	horizontal
size	size of list	string	large / default /small	-
title	title text, display on the top left	string	-	-
extra	extra text, display on the top right	string	-	-
align	column content alignment (If no `border`, effective for both label and content)	string	left / center / right	left
label-align	column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)	string	left / center / right	-

columns

Name	Description	Type	Options	Default
prop	the key of detail	string	-	-
label	label text	string	-	-
span	colspan of column	number	-	1
width	column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)	string	-	-
minWidth	column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)	string	-	-
align	column content alignment (If no `border`, effective for both label and content)	string	left / center / right	left
labelAlign	column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)	string	left / center / right	-
className	column content custom class name	string	-	-
labelClassName	column label custom class name	string	-	-
render	render function for descriptions columns	Function(detail)	-	-
renderLabel	render function for Label	Function(column)	-	-

Slots

Name	Description
-	insert more descriptions information at the end
title	custom title, display on the top left, parameters { size }
extra	custom extra area, display on the top right, parameters { size }
detail-[prop]	control the `Item` display content, parameters { size, item }
detail-[prop]-label	control the `Item` label display content, parameters { size, item }

Tip

[prop] the prop of columns

Descriptions #

Use #

Basic Use #

Intellisense #

Nested value #

Alignment #

Slots #

TypeScript #

Props #

columns #

Slots #

Descriptions

Use

Basic Use

Intellisense

Nested value

Alignment

Slots

TypeScript

Props

columns

Slots