Descriptions

列表形式展示多个字段

使用

基础用法

当 columns 绑定的是一个具有响应式的数组时，数组的变动会影响 Descriptions 变动（及动态 Descriptions）。如果不需要动态 Descriptions 推荐绑定一个普通数组

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>

智能提示

通过辅助函数 defineDescriptionsColumns 提供智能提示

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>

获取嵌套键值

支持直接对具有嵌套结构的对象或数组进行取值，仅需要配置 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>

对齐方式

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>

插槽

提示

从 1.2.0 起，[prop] 相关插槽需要增加前缀 detail- 使用

直接在模版中增加带 detail-[prop] 相关的插槽即可使用

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

defineDescriptionsColumns 支持传入一个泛型用来推断 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>

配置

参数说明类型可选值默认值
columns表单配置参考下面 columnsarray--
detail显示的详情数据object--
border是否带有边框boolean-false
column一行显示的数量number-3
direction排列的方向stringvertical / horizontalhorizontal
size列表的尺寸stringlarge / default /small-
title标题文本，显示在左上方string--
extra操作区文本，显示在右上方string--
align列的内容对齐方式（如无 border，对标签和内容均生效）stringleft / center / right-
label-align列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）stringleft / center / right-
label-width每一列的标签宽度string / number--

columns

参数说明类型可选值默认值
prop对应 detail 的字段名string--
label标签文本string--
span列的数量number-1
rowspan单元格应该跨越的行数number-1
width列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）string--
minWidth列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）string--
align列的内容对齐方式（如无 border，对标签和内容均生效）stringleft / center / rightleft
labelWidth列标签宽，如果未设置，它将与列宽度相同。 比 Descriptions 的 label-width 优先级高string / number--
labelAlign列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）stringleft / center / right-
className列的内容自定义类名string--
labelClassName列的标签自定义类名string--
render通过渲染函数实现简单的插槽功能Function(detail)--
renderLabel通过渲染函数实现简单的 Label 插槽功能Function(column)--

插槽

名称说明类型
-在尾部插入更多的描述信息-
title自定义标题文本，显示在左上方{ size }
extra自定义操作区文本，显示在右上方{ size }
detail-[prop]当前这项的内容{ size, item }
detail-[prop]-label当前这项的标签文本内容{ size, item }

提示

[prop] 为 columns 中定义的 prop