Descriptions 描述列表

以键值对列表的形式展示结构化数据，支持无边框和边框两种样式。

基础用法

用户信息

姓名:张三

手机号:138 0000 0000

居住地:上海市

备注:无

注册时间:2024-01-15

状态:正常

账号余额:¥ 1,200.00

无边框样式，label 与 value 行内排列

vue

<script setup lang="ts">
import { ADescriptions } from '@lite-code/aui-vue'

const items = [
  { label: '姓名', value: '张三' },
  { label: '手机号', value: '138 0000 0000' },
  { label: '居住地', value: '上海市' },
  { label: '备注', value: '无', span: 3 },
  { label: '注册时间', value: '2024-01-15' },
  { label: '状态', value: '正常' },
  { label: '账号余额', value: '¥ 1,200.00' },
]
</script>

<template>
  <ADescriptions title="用户信息" :items="items" />
</template>

边框样式

用户信息（边框样式）

姓名:张三

手机号:138 0000 0000

居住地:上海市

注册时间:2024-01-15

状态:正常

账号余额:¥ 1,200.00

设置 bordered 后呈现表格样式

vue

<script setup lang="ts">
import { ADescriptions } from "@lite-code/aui-vue";

const items = [
  { label: "姓名", value: "张三" },
  { label: "手机号", value: "138 0000 0000" },
  { label: "居住地", value: "上海市" },
  { label: "注册时间", value: "2024-01-15" },
  { label: "状态", value: "正常" },
  { label: "账号余额", value: "¥ 1,200.00" },
];
</script>

<template>
  <ADescriptions title="用户信息（边框样式）" :items="items" bordered />
</template>

跨列

项目详情

项目名称:AUI 组件库

状态:进行中

负责人:张三

开始日期:2024-01-01

截止日期:2024-06-30

描述:基于 Vue 3 的现代化 UI 组件库，持续迭代中。

在 items 中设置 span 让某项占据多列

vue

<script setup lang="ts">
import { ADescriptions } from '@lite-code/aui-vue'

const items = [
  { label: '项目名称', value: 'AUI 组件库', span: 2 },
  { label: '状态', value: '进行中' },
  { label: '负责人', value: '张三' },
  { label: '开始日期', value: '2024-01-01' },
  { label: '截止日期', value: '2024-06-30' },
  { label: '描述', value: '基于 Vue 3 的现代化 UI 组件库，持续迭代中。', span: 3 },
]
</script>

<template>
  <ADescriptions title="项目详情" :items="items" :column="3" bordered />
</template>

API

Props

属性	类型	默认值	说明
title	string	—	标题
items	DescriptionItem[]	—	数据项列表（必填）
column	number	3	每行列数
colon	string	':'	label 后的分隔符
bordered	boolean	false	是否显示边框（表格样式）
labelStyle	object	—	label 自定义样式
contentStyle	object	—	content 自定义样式
className	string	—	自定义 class
style	object	—	自定义样式

DescriptionItem

字段	类型	说明
label	string	标签文字（必填）
value	string | number	值（必填）
span	number	占据的列数，默认 1

Slots

插槽	说明
title	自定义标题（覆盖 title prop）