Descriptions

출처: 문서

본문

여러 필드를 목록 형태로 표시하는 컴포넌트예요. 사용자 정보처럼 라벨과 값으로 이루어진 데이터를 격자로 보여줄 때 유용해요.

<el-descriptions> 안에 <el-descriptions-item>으로 각 항목을 나열해요. 각 항목은 label과 내용으로 구성돼요.

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

size 속성으로 large, default, small 크기를 선택할 수 있어요. border 속성으로 테두리 유무도 정할 수 있어요.

.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}

direction 속성을 vertical로 설정하면 세로 방향 목록을 만들 수 있어요.

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

rowspan 속성으로 셀이 몇 줄에 걸칠지 지정할 수 있어요. 사진처럼 세로로 긴 콘텐츠를 배치할 때 유용해요.

label과 내용에 대해 정렬·너비·클래스 이름 등을 커스터마이즈할 수 있어요.

Name	Description	Type	Default
border	with or without border	boolean	false
column	numbers of Descriptions Item in one line	number	3
direction	direction of list	enum	horizontal
size	size of list	enum	—
title	title text, display on the top left	string	''
extra	extra text, display on the top right	string	''
label-width 2.8.8	label width of every column	string / number	—

Name	Description	Subtags
default	customize default content	Descriptions Item
title	custom title, display on the top left	—
extra	custom extra area, display on the top right	—

Name	Description	Type	Default
label	label text	string	''
span	colspan of column	number	1
rowspan 2.8.1	the number of rows a cell should span	number	1
width	column width, the width of the same column in different rows is set by the max value (If no border, width contains label and content)	string / number	''
min-width	column minimum width, columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion (If noborder, width contains label and content)	string / number	''
label-width 2.8.8	column label width, if not set, it will be the same as the width of the column. Higher priority than the label-width of Descriptions	string / number	—
align	column content alignment (If no border, effective for both label and content)	enum	left
label-align	column label alignment, if omitted, the value of the above align attribute will be applied (If no border, please use align attribute)	enum	—
class-name	column content custom class name	string	''
label-class-name	column label custom class name	string	''

Name	Description
default	customize default content
label	custom label