테이블
테이블 (Table)
출처: 문서
본문
비슷한 형식의 여러 데이터를 표시하는 컴포넌트예요. 테이블에서 데이터를 정렬, 필터링, 비교할 수 있어요.
기본 테이블 (Basic Table)
기본 테이블은 데이터를 표시하기 위한 거예요.
el-table의 data 속성에 객체 배열을 설정한 뒤, el-table-column 안에서 prop(data 배열에 있는 객체의 키에 해당)을 사용하면 데이터를 테이블 열에 넣을 수 있어요. label 속성으로 열 이름을 정의하고, width 속성으로 열의 너비를 정의할 수도 있어요.
줄무늬 테이블 (Striped Table)
줄무늬 테이블은 서로 다른 행을 구분하기 쉽게 만들어줘요.
stripe 속성은 Boolean을 받아요. true면 테이블에 줄무늬가 적용돼요.
테두리가 있는 테이블 (Table With Border)
기본적으로 Table에는 세로 테두리가 없어요. 필요하다면 border 속성을 true로 설정할 수 있어요.
상태가 있는 테이블 (Table With Status)
테이블 콘텐츠를 강조해서 "success, information, warning, danger" 등의 상태를 구분할 수 있어요.
el-table에서 row-class-name을 사용해서 특정 행에 커스텀 클래스를 추가할 수 있어요. 그런 다음 커스텀 클래스로 스타일을 지정하면 돼요.
오버플로우 툴팁이 있는 테이블 (Table With Show Overflow Tooltip)
콘텐츠가 너무 길면 여러 줄로 나뉘는데, show-overflow-tooltip을 사용하면 한 줄로 유지할 수 있어요.
Boolean 값을 받는 show-overflow-tooltip 속성이에요. true로 설정하면 셀에 마우스를 올렸을 때 넘치는 콘텐츠가 툴팁에 표시돼요.
고정 헤더가 있는 테이블 (Table With Fixed Header)
행이 너무 많으면 고정 헤더를 사용할 수 있어요.
el-table의 height 속성을 설정하면 다른 코드 없이도 테이블 헤더를 고정할 수 있어요.
고정 열이 있는 테이블 (Table With Fixed Column)
열이 너무 많으면 일부 열을 고정할 수 있어요.
el-table-column에서 사용하는 fixed 속성은 Boolean을 받아요. true면 열이 왼쪽에 고정돼요. 또한 'left'와 'right' 두 문자열 리터럴도 받는데, 둘 다 해당 방향으로 열이 고정된다는 뜻이에요.
고정 열과 헤더가 있는 테이블 (Table With Fixed Columns and Header)
테이블에 넣어야 할 데이터가 아주 많다면 헤더와 열을 동시에 고정할 수 있어요. 위 두 예시를 조합하면 열과 헤더를 동시에 고정할 수 있어요.
가변 높이의 고정 헤더 테이블 (Fluid-height Table With Fixed Header)
데이터가 동적으로 변경될 때는 고정 높이보다 최대 높이를 갖고, 필요할 때만 스크롤 바를 표시하고 싶을 수 있어요.
el-table의 max-height 속성을 설정하면 테이블 헤더를 고정할 수 있어요. 테이블 본문은 행의 높이가 max height 값을 초과할 때만 스크롤돼요.
그룹 테이블 헤더 (Grouping Table Head)
데이터 구조가 복잡하면 그룹 헤더를 사용해서 데이터 계층을 보여줄 수 있어요.
el-table-column 안에 el-table-column을 배치하기만 하면 그룹 헤더를 만들 수 있어요.
고정 그룹 헤더 테이블 (Table With Fixed Group Header)
고정 그룹 헤더를 지원해요.
그룹 헤더의 fixed 속성은 가장 바깥쪽 el-table-column에 의해 결정돼요.
단일 선택 (Single Select)
단일 행 선택을 지원해요.
Table은 단일 행 선택을 지원해요. highlight-current-row 속성을 추가하면 활성화할 수 있어요. 행 선택이 변경되면 current-change라는 이벤트가 트리거되고, 그 파라미터는 변경 전후의 행인 currentRow와 oldCurrentRow예요. 행 인덱스를 표시해야 한다면 type 속성을 index로 지정한 el-table-column을 새로 추가하면 돼요. 그러면 1부터 시작하는 인덱스가 보여요.
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
interface User {
date: string
name: string
address: string
}
const currentRow = ref()
const singleTableRef = ref()
const setCurrent = (row?: User) => {
singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: User | null) => {
currentRow.value = val
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
다중 선택 (Multiple Select)
여러 행을 선택할 수도 있어요.
2.8.3 이후부터 toggleRowSelection은 세 번째 파라미터 ignoreSelectable을 지원해서 selectable 속성을 무시할지 결정할 수 있어요.
다중 선택을 활성화하는 건 아주 간단해요. type을 selection으로 설정한 el-table-column을 추가하기만 하면 돼요.
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
interface User {
id: number
date: string
name: string
address: string
}
const multipleTableRef = ref()
const multipleSelection = ref([])
const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
if (rows) {
rows.forEach((row) => {
multipleTableRef.value!.toggleRowSelection(
row,
undefined,
ignoreSelectable
)
})
} else {
multipleTableRef.value!.clearSelection()
}
}
const handleSelectionChange = (val: User[]) => {
multipleSelection.value = val
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 5,
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 6,
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 7,
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
정렬 (Sorting)
데이터를 정렬해서 빠르게 찾거나 비교할 수 있어요.
특정 열에 sortable 속성을 설정하면 그 열을 기준으로 데이터를 정렬할 수 있어요. 기본값이 false인 Boolean을 받아요. 테이블 속성 default-sort로 기본 정렬 열과 순서를 정할 수 있어요. 직접 만든 정렬 규칙을 적용하려면 sort-method나 sort-by를 사용해요. 백엔드에서 원격 정렬이 필요하면 sortable을 custom으로 설정하고 Table의 sort-change 이벤트를 구독하세요. 이벤트 핸들러에서 정렬 열과 정렬 순서에 접근할 수 있으니 API에서 정렬된 테이블 데이터를 가져올 수 있어요. 이 예시에서는 formatter라는 다른 속성으로 특정 열의 값을 포맷해요. 이 속성은 row와 column이라는 두 파라미터를 받는 함수를 받아요. 필요에 따라 처리하면 돼요.
필터 (Filter)
테이블을 필터링해서 원하는 데이터를 찾을 수 있어요.
el-table-column에 filters와 filter-method 속성을 설정하면 그 열을 필터링할 수 있어요. filters는 배열이고, filter-method는 어떤 행을 표시할지 결정하는 함수예요. value, row, column이라는 세 파라미터를 받아요.
커스텀 열 템플릿 (Custom Column Template)
테이블 열을 커스텀해서 다른 컴포넌트와 통합할 수 있어요. slot을 통해 row, column, $index, store(Table의 상태 관리)라는 데이터에 접근할 수 있어요.
import { Timer } from '@element-plus/icons-vue'
interface User {
date: string
name: string
address: string
}
const handleEdit = (index: number, row: User) => {
console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
console.log(index, row)
}
const tableData: User[] = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
커스텀 헤더 테이블 (Table With Custom Header)
테이블 헤더를 커스텀해서 더 다양하게 만들 수 있어요. 헤더 슬롯으로 헤더의 모양을 직접 지정할 수 있어요.
확장 가능한 행 (Expandable Row)
행 내용이 너무 길어서 가로 스크롤 바를 표시하고 싶지 않다면 확장 가능한 행 기능을 사용할 수 있어요.
2.9.7 이후부터 preserve-expanded-content가 추가되어 접혔을 때 DOM에서 확장된 행 콘텐츠를 보존할지 제어할 수 있어요.
type="expand"와 slot을 추가하면 확장 가능한 행이 활성화돼요. el-table-column의 템플릿이 확장된 행의 내용으로 렌더링되며, 커스텀 열 템플릿에서 slot을 사용할 때와 같은 속성에 접근할 수 있어요.
import { ref } from 'vue'
const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(false)
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
]
트리 데이터와 지연 모드 (Tree Data and Lazy Mode)
트리 구조 데이터를 표시할 수 있어요. 행에 children 필드가 있으면 중첩 데이터로 취급돼요. 중첩 데이터를 렌더링하려면 row-key prop이 필요해요. 또한 자식 행 데이터를 비동기로 로드할 수도 있어요. Table의 lazy 속성을 true로 설정하고 load 함수를 지정하세요. 행의 hasChildren 속성을 지정해서 어떤 행에 자식이 있는지 결정해요. children과 hasChildren 둘 다 tree-props로 설정할 수 있어요.
interface User {
id: number
date: string
name: string
address: string
hasChildren?: boolean
children?: User[]
}
const load = (
row: User,
treeNode: unknown,
resolve: (data: User[]) => void
) => {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
])
}, 1000)
}
const tableData: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
const tableData1: User[] = [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
hasChildren: true,
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
선택 가능한 트리 (Selectable Tree)
treeProps.checkStrictly가 true면 부모와 자식 노드의 선택 상태가 더 이상 연관되지 않아요. 즉 부모 노드를 선택해도 자식 노드는 선택되지 않아요. treeProps.checkStrictly가 false면 부모와 자식 노드의 선택 상태가 자식 노드의 선택 상태와 연관돼요. 즉 부모 노드를 선택하면 모든 자식 노드도 선택돼요.
요약 행 (Summary Row)
숫자 테이블의 경우 테이블 하단에 각 열의 합을 표시하는 추가 행을 넣을 수 있어요.
show-summary를 true로 설정하면 요약 행을 추가할 수 있어요. 기본적으로 요약 행의 첫 번째 열은 합을 구하지 않고 항상 'Sum'을 표시해요(표시 텍스트는 sum-text로 설정할 수 있어요). 다른 열은 해당 열의 모든 숫자를 합산해서 표시해요. 물론 직접 합산 동작을 정의할 수도 있어요. 그러려면 배열을 반환하는 메서드를 summary-method에 전달하면 돼요. 반환된 배열의 각 요소는 요약 행의 열에 표시되는데, VNode 또는 string일 수 있어요. 이 예시의 두 번째 테이블이 자세한 데모예요.
Rowspan과 Colspan
rowspan과 colspan을 설정하면 셀을 병합할 수 있어요.
span-method 속성으로 rowspan과 colspan을 설정해요. 이 속성은 메서드를 받는데, 현재 행 row, 현재 열 column, 현재 행 인덱스 rowIndex, 현재 열 인덱스 columnIndex를 포함한 객체를 그 메서드에 전달해요. 메서드는 두 숫자의 배열을 반환해야 하며, 첫 번째 숫자는 rowspan이고 두 번째 숫자는 colspan이에요. rowspan과 colspan props를 가진 객체를 반환할 수도 있어요.
import type { TableColumnCtx } from 'element-plus'
interface User {
id: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx
rowIndex: number
columnIndex: number
}
const arraySpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
}
}
const tableData: User[] = [
{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10,
},
{
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12,
},
{
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9,
},
{
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17,
},
{
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15,
},
]
커스텀 인덱스 (Custom Index)
type=index 열에서 행 인덱스를 커스텀할 수 있어요.
행 인덱스를 커스텀하려면 type=index인 el-table-column에서 index 속성을 사용해요. 숫자로 지정하면 모든 인덱스에 그 숫자만큼 오프셋이 적용돼요. 또한 각 인덱스(0부터 시작)를 파라미터로 받는 메서드도 받아들이며, 반환된 값이 인덱스로 표시돼요.
테이블 레이아웃 (Table Layout)
table-layout 속성은 테이블 셀, 행, 열을 배치하는 데 사용하는 알고리즘을 설정해요.
툴팁 포맷터 (Tooltip Formatter)
tooltip-formatter로 툴팁 콘텐츠를 커스텀할 수 있어요.
Table API
Table 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| data | 테이블 데이터 | array | [] |
| height | 테이블의 높이. 기본적으로 자동 높이를 가져요. 값이 숫자면 높이는 픽셀로 측정되고, 문자열이면 값이 요소의 style.height에 할당돼요. 이때 높이는 외부 스타일의 영향을 받아요 | string / number | — |
| max-height | 테이블의 최대 높이. 유효한 값은 숫자 또는 px 단위의 높이예요 | string / number | — |
| stripe | Table 줄무늬 여부 | boolean | false |
| border | Table 세로 테두리 여부 | boolean | false |
| size | Table의 크기 | enum | — |
| fit | 열의 너비가 컨테이너에 자동으로 맞는지 여부 | boolean | true |
| show-header | Table 헤더 표시 여부 | boolean | true |
| highlight-current-row | 현재 행 강조 여부 | boolean | false |
| current-row-key | 현재 행의 키. set 전용 prop이에요 | string / number | — |
| row-class-name | 행의 커스텀 클래스 이름을 반환하는 함수, 또는 모든 행에 클래스 이름을 지정하는 문자열 | Function / string | — |
| row-style | 행의 커스텀 스타일을 반환하는 함수, 또는 모든 행에 커스텀 스타일을 지정하는 객체 | Function / object | — |
| cell-class-name | 셀의 커스텀 클래스 이름을 반환하는 함수, 또는 모든 셀에 클래스 이름을 지정하는 문자열 | Function / string | — |
| cell-style | 셀의 커스텀 스타일을 반환하는 함수, 또는 모든 셀에 커스텀 스타일을 지정하는 객체 | Function / object | — |
| header-row-class-name | 테이블 헤더의 행에 대한 커스텀 클래스 이름을 반환하는 함수, 또는 헤더의 모든 행에 클래스 이름을 지정하는 문자열 | Function / string | — |
| header-row-style | 테이블 헤더의 행에 대한 커스텀 스타일을 반환하는 함수, 또는 헤더의 모든 행에 커스텀 스타일을 지정하는 객체 | Function / object | — |
| header-cell-class-name | 테이블 헤더의 셀에 대한 커스텀 클래스 이름을 반환하는 함수, 또는 헤더의 모든 셀에 클래스 이름을 지정하는 문자열 | Function / string | — |
| header-cell-style | 테이블 헤더의 셀에 대한 커스텀 스타일을 반환하는 함수, 또는 헤더의 모든 셀에 커스텀 스타일을 지정하는 객체 | Function / object | — |
| row-key | 행 데이터의 키. 렌더링 최적화에 사용돼요. reserve-selection이 켜져 있거나 트리 데이터를 표시할 때 필수예요. 타입이 String이면 user.info.id처럼 다단계 접근이 지원되지만, user.info[0].id는 지원되지 않아요. 그런 경우에는 Function을 사용해야 해요 | Function / string | — |
| empty-text | 데이터가 비어 있을 때 표시되는 텍스트. #empty로 이 영역을 커스텀할 수 있어요 | string | No Data |
| default-expand-all | 기본적으로 모든 행을 펼칠지 여부. type="expand" 열이 있거나 트리 구조 데이터를 포함할 때 동작해요 | boolean | false |
| expand-row-keys | 이 prop으로 펼친 행을 설정해요. prop의 값은 펼친 행의 키들이에요. 이 prop을 사용하기 전에 row-key를 설정해야 해요 | array | — |
| default-sort | 기본 정렬 열과 순서를 설정해요. prop 속성은 기본 정렬 열을, order 속성은 기본 정렬 순서를 설정하는 데 사용돼요 | object | prop이 설정되고 order가 설정되지 않으면 order는 기본적으로 오름차순이에요 |
| tooltip-effect | 오버플로우 툴팁의 효과 | enum | dark |
| tooltip-options 2.2.28 | 오버플로우 툴팁의 옵션. 아래 tooltip 컴포넌트를 참고하세요 | object | object |
| append-filter-panel-to 2.8.4 | 필터 패널이 붙는 요소 | string | — |
| show-summary | 요약 행 표시 여부 | boolean | false |
| sum-text | 요약 행의 첫 번째 열에 표시되는 텍스트 | string | Sum |
| summary-method | 커스텀 요약 메서드 | Function | — |
| span-method | rowspan과 colspan을 반환하는 메서드 | Function | — |
| select-on-indeterminate | 다중 선택 테이블에서 일부 행만 선택된(전부는 아닌) 상태일 때 마스터 체크박스 동작을 제어해요. true면 모든 행이 선택되고, 아니면 선택이 해제돼요 | boolean | true |
| indent | 트리 데이터의 가로 들여쓰기 | number | 16 |
| lazy | 데이터 지연 로딩 여부 | boolean | false |
| load | 자식 행 데이터를 로드하는 메서드. lazy가 true일 때만 동작해요 | Function | — |
| tree-props | 중첩 데이터 렌더링 설정 | object | object |
| table-layout | 테이블 셀, 행, 열을 배치하는 데 사용하는 알고리즘을 설정해요 | enum | fixed |
| scrollbar-always-on | 스크롤바 항상 표시 | boolean | false |
| show-overflow-tooltip | 셀에 마우스를 올렸을 때 넘치는 콘텐츠를 숨기고 툴팁에 표시할지 여부. 모든 테이블 열에 영향을 주며, table tooltip-options를 참고하세요 | boolean / object 2.3.7 | — |
| flexible 2.2.1 | 메인 축 최소 크기가 콘텐츠를 따르지 않도록 보장 | boolean | false |
| scrollbar-tabindex 2.8.3 | 본문 스크롤바의 wrap 컨테이너 tabindex | string / number | — |
| allow-drag-last-column 2.9.2 | 마지막 열 드래그 허용 여부 | boolean | true |
| tooltip-formatter 2.9.4 | show-overflow-tooltip 사용 시 툴팁 콘텐츠 커스텀 | Function | — |
| preserve-expanded-content 2.9.7 | 접혔을 때 DOM에서 확장된 행 콘텐츠를 보존할지 여부 | boolean | false |
| native-scrollbar 2.10.5 | 네이티브 스크롤바 사용 여부 | boolean | false |
| row-expandable 2.13.2 | 확장 가능한 행 활성화. type="expand" 열이 있을 때 동작해요 | Function | — |
Table 이벤트 (Events)
| Name | Description | Type |
|---|---|---|
| select | 사용자가 행의 체크박스를 클릭할 때 트리거돼요 | Function |
| select-all | 사용자가 테이블 헤더의 체크박스를 클릭할 때 트리거돼요 | Function |
| selection-change | 선택이 변경될 때 트리거돼요 | Function |
| cell-mouse-enter | 셀에 마우스를 올릴 때 트리거돼요 | Function |
| cell-mouse-leave | 셀에서 마우스를 뗄 때 트리거돼요 | Function |
| cell-click | 셀을 클릭할 때 트리거돼요 | Function |
| cell-dblclick | 셀을 더블 클릭할 때 트리거돼요 | Function |
| cell-contextmenu | 사용자가 셀을 오른쪽 클릭할 때 트리거돼요 | Function |
| row-click | 행을 클릭할 때 트리거돼요 | Function |
| row-contextmenu | 사용자가 행을 오른쪽 클릭할 때 트리거돼요 | Function |
| row-dblclick | 행을 더블 클릭할 때 트리거돼요 | Function |
| header-click | 열 헤더를 클릭할 때 트리거돼요 | Function |
| header-contextmenu | 사용자가 열 헤더를 오른쪽 클릭할 때 트리거돼요 | Function |
| sort-change | Table의 정렬이 변경될 때 트리거돼요 | Function |
| filter-change | 테이블의 필터가 변경될 때 트리거돼요 | Function |
| current-change | 현재 행이 변경될 때 트리거돼요 | Function |
| header-dragend | 열 헤더의 테두리를 드래그해서 열 너비를 변경한 뒤 트리거돼요 | Function |
| expand-change | 사용자가 행을 펼치거나 접을 때 트리거돼요 (확장 가능한 테이블의 두 번째 파라미터는 expandedRows이고, 트리 테이블의 두 번째 파라미터는 expanded예요) | Function |
| scroll 2.9.0 | 스크롤된 후 호출돼요 | Function |
Table 슬롯 (Slots)
| Name | Description | Subtags |
|---|---|---|
| default | 기본 콘텐츠 커스텀 | Table-column |
| append | 마지막 행 뒤에 삽입할 내용. 테이블에 무한 스크롤을 구현하려면 이 슬롯이 필요할 수 있어요. 요약 행이 있으면 이 슬롯은 요약 행 위에 표시돼요 | — |
| empty | 데이터가 비어 있을 때 콘텐츠를 커스텀할 수 있어요 | — |
Table Exposes
| Method | Description | Type |
|---|---|---|
| clearSelection | 다중 선택 Table에서 사용. 사용자 선택을 지워요 | Function |
| getSelectionRows | 현재 선택된 행을 반환해요 | Function |
| getHalfSelectionRows 2.14.2 | 현재 절반 선택된 행을 반환해요 | Function |
| toggleRowSelection | 다중 선택 Table에서 사용. 특정 행이 선택되었는지 토글해요. 두 번째 파라미터로 이 행의 선택 여부를 직접 설정할 수 있어요 | Function |
| toggleAllSelection | 다중 선택 Table에서 사용. 전체 선택과 전체 선택 해제를 토글해요 | Function |
| toggleRowExpansion | 확장 가능한 Table 또는 트리 Table에서 사용. 특정 행이 펼쳐졌는지 토글해요. 두 번째 파라미터로 이 행의 펼침/접힘 여부를 직접 설정할 수 있어요 | Function |
| setCurrentRow | 단일 선택 Table에서 사용. 특정 행을 선택된 상태로 설정해요. 파라미터 없이 호출하면 선택이 지워져요 | Function |
| clearSort | 정렬을 지우고 데이터를 원래 순서로 복원해요 | Function |
| clearFilter | 전달된 columnKey를 가진 열들의 필터를 지워요. 파라미터가 없으면 모든 필터를 지워요 | Function |
| doLayout | Table의 레이아웃을 새로고침해요. Table의 가시성이 바뀔 때 올바른 레이아웃을 얻으려면 이 메서드를 호출해야 할 수 있어요 | Function |
| sort | Table을 수동으로 정렬해요. prop 속성은 정렬 열을, order 속성은 정렬 순서를 설정하는 데 사용돼요 | Function |
| scrollTo | 특정 좌표 집합으로 스크롤해요 | Function |
| setScrollTop | 세로 스크롤 위치를 설정해요 | Function |
| setScrollLeft | 가로 스크롤 위치를 설정해요 | Function |
| columns 2.7.6 | 테이블 열 컨텍스트를 가져와요 | array |
| updateKeyChildren 2.8.4 | lazy Table에서 사용. rowKey를 설정해야 하며, key children을 업데이트해요 | Function |
Table-column API
Table-column 속성 (Attributes)
| Name | Description | Type | Default |
|---|---|---|---|
| type | 열의 타입. selection으로 설정하면 열이 체크박스를 표시하고, index로 설정하면 행의 인덱스(1부터 시작)를 표시하며, expand로 설정하면 확장 아이콘을 표시해요 | enum | default |
| index | 각 행의 인덱스 커스텀. type=index 열에서 동작해요 | number / Function | — |
| label | 열 라벨 | string | — |
| column-key | 열의 키. filter-change 이벤트를 사용해야 한다면 어떤 열이 필터링되는지 식별하기 위해 이 속성이 필요해요 | string | — |
| prop | 필드 이름. 별칭 property를 사용할 수도 있어요 | string | — |
| width | 열 너비 | string / number | '' |
| min-width | 열 최소 너비. width가 있는 열은 고정 너비를 갖고, min-width가 있는 열은 비율에 따라 분배된 너비를 가져요 | string / number | '' |
| fixed | 열이 왼쪽/오른쪽에 고정되는지 여부. true면 왼쪽에 고정돼요 | enum / boolean | false |
| render-header | 이 열의 테이블 헤더 렌더 함수 | Function | — |
| sortable | 열 정렬 가능 여부. 'custom'으로 설정하고 Table의 sort-change 이벤트를 구독하면 원격 정렬을 할 수 있어요 | boolean / string | false |
| sort-method | 정렬 메서드. sortable이 true일 때 동작해요. Array.sort처럼 숫자를 반환해야 해요 | Function | — |
| sort-by | 정렬 기준이 될 속성 지정. sortable이 true이고 sort-method가 undefined일 때 동작해요. Array로 설정하면 이전 속성이 같을 때 다음 속성으로 순차적으로 정렬해요 | Function / string / array | — |
| sort-orders | 데이터를 정렬할 때 사용하는 정렬 전략의 순서. sortable이 true일 때 동작해요. 배열을 받으며, 사용자가 헤더를 클릭하면 열이 배열의 요소 순서대로 정렬돼요 | object | ['ascending', 'descending', null] |
| resizable | 열 너비 조절 가능 여부. el-table의 border가 true일 때 동작해요 | boolean | true |
| formatter | 셀 내용을 포맷하는 함수 | Function | — |
| show-overflow-tooltip | 셀에 마우스를 올렸을 때 넘치는 콘텐츠를 숨기고 툴팁에 표시할지 여부 | boolean / object 2.2.28 | undefined |
| align | 정렬 | enum | left |
| header-align | 테이블 헤더의 정렬. 생략하면 위 align 속성의 값이 적용돼요 | enum | left |
| class-name | 열에 있는 셀의 클래스 이름 | string | — |
| label-class-name | 이 열 라벨의 클래스 이름 | string | — |
| selectable | 특정 행을 선택할 수 있는지 결정하는 함수. type이 'selection'일 때 동작해요 | Function | — |
| reserve-selection | 데이터 새로고침 후 선택을 보존할지 여부. type이 'selection'일 때 동작해요. 이 기능이 동작하려면 row-key가 필요하다는 점에 주의하세요 | boolean | false |
| filters | 데이터 필터링 옵션 배열. 이 배열의 각 요소에 text와 value가 필요해요 | array | — |
| filter-placement | 필터 드롭다운의 위치 | enum | — |
| filter-class-name 2.5.0 | 필터 드롭다운의 className | string | — |
| filter-multiple | 데이터 필터링에서 다중 옵션 지원 여부 | boolean | true |
| filter-method | 데이터 필터링 메서드. filter-multiple이 켜져 있으면 이 메서드가 각 행에 대해 여러 번 호출되고, 호출 중 하나가 true를 반환하면 그 행이 표시돼요 | Function | — |
| filtered-value | 선택된 데이터의 필터 값. render-header로 테이블 헤더를 렌더링할 때 유용할 수 있어요 | array | — |
| tooltip-formatter 2.9.4 | show-overflow-tooltip 사용 시 툴팁 콘텐츠 커스텀 | Function | — |
Table-column 슬롯 (Slots)
| Name | Description | Type |
|---|---|---|
| default | 테이블 열의 커스텀 콘텐츠 | object |
| header | 테이블 헤더의 커스텀 콘텐츠 | object |
| filter-icon 2.7.8 | 필터 아이콘의 커스텀 콘텐츠 | object |
| expand 2.10.0 | 확장 열의 커스텀 콘텐츠. v2.13.2부터 expandable 속성이 지원돼요 | object |
타입 선언 (Type Declarations)
interface Sort {
prop: string
order: 'ascending' | 'descending'
init?: any
silent?: any
}
interface TreeNode {
expanded?: boolean
loading?: boolean
noLazyChildren?: boolean
indent?: number
level?: number
display?: boolean
}
type DefaultRow = Record
type TableColumnCtx = {
id: string
realWidth: number | null
type: string
label: string
className: string
labelClassName: string
property: string
prop: string
width?: string | number
minWidth: string | number
renderHeader: (data: CI) => VNode
sortable: boolean | string
sortMethod: (a: T, b: T) => number
sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[]
resizable: boolean
columnKey: string
rawColumnKey: string
align: string
headerAlign: string
showOverflowTooltip?: boolean | TableOverflowTooltipOptions
tooltipFormatter?: TableOverflowTooltipFormatter
fixed: boolean | string
formatter: (
row: T,
column: TableColumnCtx,
cellValue: any,
index: number
) => VNode | string
selectable: (row: T, index: number) => boolean
reserveSelection: boolean
filterMethod: FilterMethods
filteredValue: string[]
filters: Filters
filterPlacement: string
filterMultiple: boolean
filterClassName: string
index: number | ((index: number) => number)
sortOrders: (TableSortOrder | null)[]
renderCell: (data: any) => VNode | VNode[]
colSpan: number
rowSpan: number
children?: TableColumnCtx[]
level: number
filterable: boolean | FilterMethods | Filters
order: TableSortOrder | null
isColumnGroup: boolean
isSubColumn: boolean
columns: TableColumnCtx[]
getColumnIndex: () => number
no: number
filterOpened?: boolean
renderFilterIcon?: (scope: any) => VNode
renderExpand?: (scope: any) => VNode
}
FAQ
el-table-column의 올바른 슬롯 타입을 어떻게 추론하나요?
el-table-column은 제네릭 컴포넌트예요. TypeScript가 주변 컨텍스트에서 슬롯의 행 타입을 추론하지 못한다면, el-table-column 바로 앞에 Vue의 @vue-generic 지시문 주석을 배치하고 행 타입을 명시적으로 전달하세요. 자세한 내용은 Vue 문서의 Generics를 참고하세요.
{{ row.name }}
interface User {
name: string
address: string
}
const tableData: User[] = [
{
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
테이블에서 이미지 미리보기를 어떻게 사용하나요?
DOM 템플릿을 사용할 때 열이 렌더링되지 않는 이유는 무엇인가요?
대표적인 이슈: #5046 #5862 #6919
이것은 HTML 사양이 몇몇 특정 요소만 닫는 태그를 생략하도록 허용하기 때문이에요. 가장 흔한 것은 <input>과 <img>예요. 다른 모든 요소에서는 닫는 태그를 생략하면 네이티브 HTML 파서가 열기 태그를 종료하지 않았다고 생각해요.
자세한 내용은 vue 문서를 참고하세요.