vue-element-plus-admin

Descriptions 描述组件

注意

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

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

Descriptions 组件位于 src/components/Descriptions 内

注意

推荐使用 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内容对齐方式stringleft/center/rightleft
labelAlign标题对齐方式stringleft/center/rightleft
className自定义内容标签类名string--
labelClassName自定义标题标签类名string--
slots插槽对象object--