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-03NameTomAddressNo. 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-03NameTomAddressNo. 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

border
align
label-align
Date2016-05-03NameTomAddressNo. 189, Grove St, Los Angeles
<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
Date2016-05-03Name:TomAddressNo. 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-03NameTomAddressNo. 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

NameDescriptionTypeOptionsDefault
columnsto generate descriptions list, reference columnsarray--
detaildetail data of displayobject--
borderwith or without borderboolean-false
columnnumbers of Descriptions Item in one linenumber-3
directiondirection of liststringvertical / horizontalhorizontal
sizesize of liststringlarge / default /small-
titletitle text, display on the top leftstring--
extraextra text, display on the top rightstring--
aligncolumn content alignment (If no border, effective for both label and content)stringleft / center / rightleft
label-aligncolumn label alignment, if omitted, the value of the above align attribute will be applied (If no border, please use align attribute)stringleft / center / right-

columns

NameDescriptionTypeOptionsDefault
propthe key of detailstring--
labellabel textstring--
spancolspan of columnnumber-1
widthcolumn 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--
minWidthcolumn minimum width, columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion (If noborder, width contains label and content)string--
aligncolumn content alignment (If no border, effective for both label and content)stringleft / center / rightleft
labelAligncolumn label alignment, if omitted, the value of the above align attribute will be applied (If no border, please use align attribute)stringleft / center / right-
classNamecolumn content custom class namestring--
labelClassNamecolumn label custom class namestring--
renderrender function for descriptions columnsfunction(detail)--
renderLabelrender function for Labelfunction(column)--

Slots

NameDescription
-insert more descriptions information at the end
titlecustom title, display on the top left, parameters { size }
extracustom extra area, display on the top right, parameters { size }
detail-[prop]control the Item display content, parameters { size, item }
detail-[prop]-labelcontrol the Item label display content, parameters { size, item }

Tip

[prop] the prop of columns