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>
显示代码

获取嵌套键值

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>
显示代码

插槽

直接在模版中增加带 [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 #name="{ detail: item, size }">
      <el-tag :size="size">
        {{ item.name }}
      </el-tag>
    </template>
    <template #name-label="{ item }">
      <span>{{ item.label }}:</span>
    </template>
  </pro-descriptions>
</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>
显示代码

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——

columns 的参数

参数说明类型可选值默认值
prop对应 detail 的字段名string——
label标签文本string——
span列的数量number—1
width列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容）string / number——
min-width列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列（如无 border，宽度包含标签与内容）string / number——
align列的内容对齐方式（如无 border，对标签和内容均生效）stringleft / center / rightleft
label-align列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数）stringleft / center / right—
class-name列的内容自定义类名string——
label-class-name列的标签自定义类名string——

插槽

名称说明
title自定义标题文本，显示在左上方, 参数 { size }
extra自定义操作区文本，显示在右上方, 参数 { size }
[prop]当前这项的内容, 参数 { size, detail }
[prop]-label当前这项的标签文本内容, 参数 { size, item }

提示

[prop] 为 columns 中定义的 prop