Descriptions 描述列表

列表形式展示多个字段。

基础用法

User Info
UsernamekooriookamiTelephone18100000000PlaceSuzhou
RemarksSchoolAddress No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

不同尺寸

With border
Username
kooriookami
Telephone
18100000000
Place
Suzhou
Remarks
School
Address
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
Without border
UsernamekooriookamiTelephone18100000000PlaceSuzhou
RemarksSchoolAddress No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

垂直列表

Vertical list with border
UsernameTelephonePlace
kooriookami18100000000Suzhou
RemarksAddress
School No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
Vertical list without border
UsernameTelephonePlace
kooriookami18100000000Suzhou
RemarksAddress
School No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

单元格跨行 2.8.1

Width horizontal list
Photo
UsernamekooriookamiTelephone18100000000
PlaceSuzhouRemarksSchool
Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
Width vertical list
PhotoUsernameTelephone
kooriookami18100000000
PlaceRemarks
SuzhouSchool
Address
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

自定义样式

Customized style list
Username kooriookami Telephone 18100000000 Place Suzhou
RemarksSchoolAddress No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Descriptions API

Descriptions Attributes

属性名说明类型默认
border是否带有边框booleanfalse
column一行 Descriptions Item 的数量number3
direction排列的方向enumhorizontal
size列表的尺寸enum
title标题文本,显示在左上方string''
extra操作区文本,显示在右上方string''

Descriptions Slots

插槽名说明子标签
default自定义默认内容Descriptions Item
title自定义标题,显示在左上方
extra自定义操作区,显示在右上方

DescriptionsItem API

DescriptionsItem Attributes

属性名说明类型默认
label标签文本string''
span列的数量number1
rowspan 2.8.1单元格应该跨越的行数number1
width列的宽度,不同行相同列的宽度按最大值设定(如无 border ,宽度包含标签与内容)string / number''
min-width列的最小宽度,与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列(如无 border,宽度包含标签与内容)string / number''
align列的内容对齐方式(如无 border,对标签和内容均生效)enumleft
label-align列的标签对齐方式,若不设置该项,则使用内容的对齐方式(如无 border,请使用 align 参数)enum''
class-name列的内容自定义类名string''
label-class-namecolumn label custom class namestring''

DescriptionsItem Slots

插槽名说明
default自定义默认内容
label自定义标签

源代码

组件样式文档

贡献者