vue-element-plus-admin-doc/components/descriptions.md

Descriptions 描述组件

::: warning 注意 从 v2.5.3之后，Descriptions 组件不再基于 element-plus 的 Descriptions 进行二次封装，所以可能有的属性无法使用，具体可以自行修改或者改造，或者可以提issue。 :::

对 element-plus 的 Descriptions 组件进行封装。

Descriptions 组件位于 src/components/Descriptions 内

::: warning 注意 推荐使用 tsx 来使用 Descriptions 组件 :::

用法

更复杂点的例子，请在线预览

<script setup lang="tsx">
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { reactive } from 'vue'

const data = reactive({
  username: 'chenkl',
  nickName: '梦似花落。',
  age: 26,
  phone: '13655971xxxx',
  email: '502431556@qq.com',
  addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
  sex: '男',
  certy: '3505831994xxxxxxxx'
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'username',
    label: 'username'
  },
  {
    field: 'nickName',
    label: 'nickName'
  },
  {
    field: 'phone',
    label: 'phone'
  },
  {
    field: 'email',
    label: 'email'
  },
  {
    field: 'addr',
    label: 'addr',
    span: 24
  }
])
</script>

<template>
  <Descriptions
    title="descriptions"
    message="message"
    :data="data"
    :schema="schema"
  />
</template>

Descriptions 属性

除以下参数外，还支持 element-plus 的 Descriptions 所有属性，详见

属性	说明	类型	可选值	默认值
title	标题	string	-	-
message	提示	string	-	-
collapse	是否显示展开按钮	boolean	-	true
schema	布局结构数据，详见	DescriptionsSchema[]	-	[]
data	展示的数据	Recordable	-	{}

Schema

属性	说明	类型	可选值	默认值
span	栅格占比	number	-	-
field	字段名，唯一值，需要与 data 中的属性名对应	string	-	-
label	列表标题	string	-	-
width	列表宽度	string/number	-	-
minWidth	列表最小宽度	string/number	-	-
align	内容对齐方式	string	left/center/right	left
labelAlign	标题对齐方式	string	left/center/right	left
className	自定义内容标签类名	string	-	-
labelClassName	自定义标题标签类名	string	-	-
slots	插槽对象	object	-	-