Descriptions 描述列表

列表形式展示多个字段。

基础用法

User Info

Usernamekooriookami	Telephone18100000000	PlaceSuzhou
RemarksSchool	AddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

export function DescriptionsBasic() {  return (    <ElDescriptions title="User Info">      <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem>      <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem>      <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>      <ElDescriptionsItem label="Remarks">        <ElTag size="small">School</ElTag>      </ElDescriptionsItem>      <ElDescriptionsItem label="Address">        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province      </ElDescriptionsItem>    </ElDescriptions>  );}

不同尺寸

LargeDefaultSmall

With border

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks	School	Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Without border

Usernamekooriookami	Telephone18100000000	PlaceSuzhou
RemarksSchool	AddressNo.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

export function DescriptionsSizes() {  const [size, setSize] = useState<DemoSize>("default");  return (    <>      <ElRadioGroup        value={size}        onChange={(value) => setSize(value as DemoSize)}        style={{ marginRight: 12 }}      >        <ElRadio value="large" label="Large" />        <ElRadio value="default" label="Default" />        <ElRadio value="small" label="Small" />      </ElRadioGroup>      <ElDescriptions        title="With border"        column={3}        size={size}        border        style={{ marginTop: 20 }}        extra={<ElButton type="primary">Operation</ElButton>}      >        <ElDescriptionsItem label={iconLabel(<User />, "Username", size)}>          kooriookami        </ElDescriptionsItem>        <ElDescriptionsItem label={iconLabel(<Iphone />, "Telephone", size)}>          18100000000        </ElDescriptionsItem>        <ElDescriptionsItem label={iconLabel(<Location />, "Place", size)}>          Suzhou        </ElDescriptionsItem>        <ElDescriptionsItem label={iconLabel(<Tickets />, "Remarks", size)}>          <ElTag size="small">School</ElTag>        </ElDescriptionsItem>        <ElDescriptionsItem          label={iconLabel(<OfficeBuilding />, "Address", size)}        >          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province        </ElDescriptionsItem>      </ElDescriptions>      <ElDescriptions        title="Without border"        column={3}        size={size}        style={{ marginTop: BLOCK_MARGIN[size] }}        extra={<ElButton type="primary">Operation</ElButton>}      >        <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem>        <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem>        <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>        <ElDescriptionsItem label="Remarks">          <ElTag size="small">School</ElTag>        </ElDescriptionsItem>        <ElDescriptionsItem label="Address">          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province        </ElDescriptionsItem>      </ElDescriptions>    </>  );}

垂直列表

LargeDefaultSmall

Vertical list with border

Username	Telephone	Place
kooriookami	18100000000	Suzhou
Remarks	Address
School	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Vertical list without border

Username	Telephone	Place
kooriookami	18100000000	Suzhou
Remarks	Address
School	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

export function DescriptionsVertical() {  const [size, setSize] = useState<DemoSize>("default");  const items = [    <ElDescriptionsItem key="username" label="Username">      kooriookami    </ElDescriptionsItem>,    <ElDescriptionsItem key="telephone" label="Telephone">      18100000000    </ElDescriptionsItem>,    <ElDescriptionsItem key="place" label="Place" span={2}>      Suzhou    </ElDescriptionsItem>,    <ElDescriptionsItem key="remarks" label="Remarks">      <ElTag size="small">School</ElTag>    </ElDescriptionsItem>,    <ElDescriptionsItem key="address" label="Address">      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province    </ElDescriptionsItem>,  ];  return (    <>      <ElRadioGroup        value={size}        onChange={(value) => setSize(value as DemoSize)}        style={{ marginRight: 12 }}      >        <ElRadio value="large" label="Large" />        <ElRadio value="default" label="Default" />        <ElRadio value="small" label="Small" />      </ElRadioGroup>      <ElDescriptions        title="Vertical list with border"        direction="vertical"        column={4}        size={size}        border        style={{ marginTop: 20 }}      >        {items}      </ElDescriptions>      <ElDescriptions        title="Vertical list without border"        direction="vertical"        column={4}        size={size}        style={{ marginTop: BLOCK_MARGIN[size] }}      >        {items}      </ElDescriptions>    </>  );}

单元格跨行 2.8.1

Width horizontal list

Photo		Username	kooriookami	Telephone	18100000000
Photo		Place	Suzhou	Remarks	School
Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Width vertical list

Photo	Username	Telephone
	kooriookami	18100000000
	Place	Remarks
	Suzhou	School
Address
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

export function DescriptionsRowspan() {  return (    <>      <ElDescriptions title="Width horizontal list" border>        <ElDescriptionsItem          rowspan={2}          width={140}          label="Photo"          align="center"        >          <ElImage            src={AVATAR}            style={{ width: 100, height: 100 }}            fit="fill"          />        </ElDescriptionsItem>        <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem>        <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem>        <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>        <ElDescriptionsItem label="Remarks">          <ElTag size="small">School</ElTag>        </ElDescriptionsItem>        <ElDescriptionsItem label="Address">          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province        </ElDescriptionsItem>      </ElDescriptions>      <ElDescriptions        title="Width vertical list"        direction="vertical"        border        style={{ marginTop: 20 }}      >        <ElDescriptionsItem          rowspan={2}          width={140}          label="Photo"          align="center"        >          <ElImage            src={AVATAR}            style={{ width: 100, height: 100 }}            fit="fill"          />        </ElDescriptionsItem>        <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem>        <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem>        <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem>        <ElDescriptionsItem label="Remarks">          <ElTag size="small">School</ElTag>        </ElDescriptionsItem>        <ElDescriptionsItem label="Address">          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province        </ElDescriptionsItem>      </ElDescriptions>    </>  );}

自定义样式

Customized style list

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks	School	Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

export function DescriptionsCustomStyle() {  return (    <ElDescriptions title="Customized style list" column={3} border>      <ElDescriptionsItem        label="Username"        labelAlign="right"        align="center"        labelClassName={styles.myLabel}        className={styles.myContent}        width="150px"      >        kooriookami      </ElDescriptionsItem>      <ElDescriptionsItem label="Telephone" labelAlign="right" align="center">        18100000000      </ElDescriptionsItem>      <ElDescriptionsItem label="Place" labelAlign="right" align="center">        Suzhou      </ElDescriptionsItem>      <ElDescriptionsItem label="Remarks" labelAlign="right" align="center">        <ElTag size="small">School</ElTag>      </ElDescriptionsItem>      <ElDescriptionsItem label="Address" labelAlign="right" align="center">        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province      </ElDescriptionsItem>    </ElDescriptions>  );}

Descriptions API

Descriptions Attributes

属性名	说明	类型	默认值
border	是否带边框	`boolean`	false
column	一行显示几列	`number`	3
direction	排列方向	`enum`	horizontal
size	尺寸	`enum`	—
title	标题，显示在左上角	`ReactNode`	''
extra	操作区，显示在右上角	`ReactNode`	''
label-width	标签宽度	`string` / `number`	—

Descriptions Slots

插槽名	说明	React 写法	子标签
default	自定义内容	`children`	DescriptionsItem
title	自定义标题	`title`	—
extra	自定义操作区	`extra`	—

DescriptionsItem API

DescriptionsItem Attributes

属性名	说明	类型	默认值
label	标签文本	`ReactNode`	''
span	占的列数	`number`	1
rowspan	占的行数	`number`	1
width	列宽	`string` / `number`	''
min-width	列最小宽度	`string` / `number`	''
label-width	标签宽度，优先级高于 Descriptions 的 label-width	`string` / `number`	—
align	内容对齐（无边框时对标签与内容同时生效）	`enum`	left
label-align	标签对齐，省略时跟随 align	`enum`	—
class-name	内容自定义类名	`string`	''
label-class-name	标签自定义类名	`string`	''

DescriptionsItem Slots

插槽名	说明	React 写法
default	自定义内容	`children`
label	自定义标签	`label`