Descriptions 描述组件

element-plusDescriptions 组件进行封装。

Descriptions 组件位于 src/components/Descriptions

用法

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

<script setup lang="ts">
import { Descriptions } 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-plusDescriptions 所有属性,详见

属性说明类型可选值默认值
title标题string--
message提示string--
collapse是否显示展开按钮boolean-true
autoSetPlaceholder是否自动设置 placeholderboolean-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--

Descriptions 插槽

插槽名说明子标签
${field}自定义内容-
${field}-label自定义标题-