Virtualized Table 虚拟化表格 beta
在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 Table V1来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。
通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。
TIP
该组件仍在测试中，生产环境使用可能有风险。 若您发现了 bug 或问题，请于 GitHub 报告给我们以便修复。 同时，有一些 API 并未在此文档中提及，因为部分还没有开发完全，因此我们不在此提及。
即使虚拟化的表格是高效的，但是当数据负载过大时，网络和内存容量也会成为您应用程序的瓶颈。 因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。
基础用法
让我们演示虚拟化表的性能，用10列和1 000行渲染一个基本示例。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2
:columns="columns"
:data="data"
:width="700"
:height="400"
fixed
/>
</template>
<script lang="ts" setup>
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 1000)
</script>隐藏源代码
自动调整大小
如果不想手动向表格传递 width 和 height 属性，可以使用 AutoResizer 对表格组件进行封装。 这会自动为你更新宽度和高度。
尝试调整您的浏览器大小来看看它是如何工作的。
TIP
由于 AutoResizer 组件的默认高度是 100%，所以请确保该组件的父元素拥有固定的高度值。 或者，您可以通过将 style 属性传递到 AutoResizer 来定义它。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
vue
<template>
<div style="height: 400px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="data"
:width="width"
:height="height"
fixed
/>
</template>
</el-auto-resizer>
</div>
</template>
<script lang="ts" setup>
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 200)
</script>隐藏源代码
自定义单元格渲染器
当然，您可以根据您的需要呈现表格单元格。 这是如何自定义您的单元格的简单例子。
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Name
Operations
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
Date
vue
<template>
<el-table-v2
:columns="columns"
:data="data"
:width="700"
:height="400"
fixed
/>
</template>
<script lang="tsx" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import {
ElButton,
ElIcon,
ElTag,
ElTooltip,
TableV2FixedDir,
} from 'element-plus'
import { Timer } from '@element-plus/icons-vue'
import type { Column } from 'element-plus'
let id = 0
const dataGenerator = () => ({
id: `random-id-${++id}`,
name: 'Tom',
date: '2020-10-1',
})
const columns: Column<any>[] = [
{
key: 'date',
title: 'Date',
dataKey: 'date',
width: 150,
fixed: TableV2FixedDir.LEFT,
cellRenderer: ({ cellData: date }) => (
<ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
{
<span class="flex items-center">
<ElIcon class="mr-3">
<Timer />
</ElIcon>
{dayjs(date).format('YYYY/MM/DD')}
</span>
}
</ElTooltip>
),
},
{
key: 'name',
title: 'Name',
dataKey: 'name',
width: 150,
align: 'center',
cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
},
{
key: 'operations',
title: 'Operations',
cellRenderer: () => (
<>
<ElButton size="small">Edit</ElButton>
<ElButton size="small" type="danger">
Delete
</ElButton>
</>
),
width: 150,
align: 'center',
},
]
const data = ref(Array.from({ length: 200 }).map(dataGenerator))
</script>隐藏源代码
带有选择的表格
使用自定义的单元格渲染来给表格组件添加选择的能力。
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 0 - Col 10
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 1 - Col 10
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 2 - Col 10
vue
<template>
<div style="height: 400px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="data"
:width="width"
:height="height"
fixed
/>
</template>
</el-auto-resizer>
</div>
</template>
<script lang="tsx" setup>
import { ref, unref } from 'vue'
import { ElCheckbox } from 'element-plus'
import type { FunctionalComponent } from 'vue'
import type { CheckboxValueType, Column } from 'element-plus'
type SelectionCellProps = {
value: boolean
intermediate?: boolean
onChange: (value: CheckboxValueType) => void
}
const SelectionCell: FunctionalComponent<SelectionCellProps> = ({
value,
intermediate = false,
onChange,
}) => {
return (
<ElCheckbox
onChange={onChange}
modelValue={value}
indeterminate={intermediate}
/>
)
}
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
checked: false,
parentId: null,
}
)
})
const columns: Column<any>[] = generateColumns(10)
columns.unshift({
key: 'selection',
width: 50,
cellRenderer: ({ rowData }) => {
const onChange = (value: CheckboxValueType) => (rowData.checked = value)
return <SelectionCell value={rowData.checked} onChange={onChange} />
},
headerCellRenderer: () => {
const _data = unref(data)
const onChange = (value: CheckboxValueType) =>
(data.value = _data.map((row) => {
row.checked = value
return row
}))
const allSelected = _data.every((row) => row.checked)
const containsChecked = _data.some((row) => row.checked)
return (
<SelectionCell
value={allSelected}
intermediate={containsChecked && !allSelected}
onChange={onChange}
/>
)
},
})
const data = ref(generateData(columns, 200))
</script>隐藏源代码
可编辑单元格
类似上面添加筛选框的方法，我们可以用同样的方法实现可编辑单元格。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
vue
<template>
<div style="height: 400px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:data="data"
:width="width"
:height="height"
fixed
/>
</template>
</el-auto-resizer>
</div>
</template>
<script lang="tsx" setup>
import { ref, withKeys } from 'vue'
import { ElInput } from 'element-plus'
import type { FunctionalComponent } from 'vue'
import type { Column, InputInstance } from 'element-plus'
type SelectionCellProps = {
value: string
intermediate?: boolean
onChange: (value: string) => void
onBlur: () => void
onKeydownEnter: () => void
forwardRef: (el: InputInstance) => void
}
const InputCell: FunctionalComponent<SelectionCellProps> = ({
value,
onChange,
onBlur,
onKeydownEnter,
forwardRef,
}) => {
return (
<ElInput
ref={forwardRef as any}
onInput={onChange}
onBlur={onBlur}
onKeydown={withKeys(onKeydownEnter, ['enter'])}
modelValue={value}
/>
)
}
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
editing: false,
parentId: null,
}
)
})
const columns: Column<any>[] = generateColumns(10)
columns[0] = {
...columns[0],
title: 'Editable Column',
cellRenderer: ({ rowData, column }) => {
const onChange = (value: string) => {
rowData[column.dataKey!] = value
}
const onEnterEditMode = () => {
rowData.editing = true
}
const onExitEditMode = () => (rowData.editing = false)
const input = ref()
const setRef = (el) => {
input.value = el
if (el) {
el.focus?.()
}
}
return rowData.editing ? (
<InputCell
forwardRef={setRef}
value={rowData[column.dataKey!]}
onChange={onChange}
onBlur={onExitEditMode}
onKeydownEnter={onExitEditMode}
/>
) : (
<div class="table-v2-inline-editing-trigger" onClick={onEnterEditMode}>
{rowData[column.dataKey!]}
</div>
)
},
}
const data = ref(generateData(columns, 200))
</script>
<style>
.table-v2-inline-editing-trigger {
border: 1px transparent dotted;
padding: 4px;
}
.table-v2-inline-editing-trigger:hover {
border-color: var(--el-color-primary);
}
</style>隐藏源代码
带状态的表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
要自定义行的外观，请使用 row-class-name 属性。 举个例子，每10行会自动添加 bg-blue-200 类名，每5行会添加 bg-red-100 类名。
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Tom
Name
Operations
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
2020/10/01
Date
vue
<template>
<el-table-v2
:columns="columns"
:data="data"
:row-class="rowClass"
:width="700"
:height="400"
/>
</template>
<script lang="tsx" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import {
ElButton,
ElIcon,
ElTag,
ElTooltip,
TableV2FixedDir,
} from 'element-plus'
import { Timer } from '@element-plus/icons-vue'
import type { Column, RowClassNameGetter } from 'element-plus'
let id = 0
const dataGenerator = () => ({
id: `random-id-${++id}`,
name: 'Tom',
date: '2020-10-1',
})
const columns: Column<any>[] = [
{
key: 'date',
title: 'Date',
dataKey: 'date',
width: 150,
fixed: TableV2FixedDir.LEFT,
cellRenderer: ({ cellData: date }) => (
<ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
{
<span class="flex items-center">
<ElIcon class="mr-3">
<Timer />
</ElIcon>
{dayjs(date).format('YYYY/MM/DD')}
</span>
}
</ElTooltip>
),
},
{
key: 'name',
title: 'Name',
dataKey: 'name',
width: 150,
align: 'center',
cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
},
{
key: 'operations',
title: 'Operations',
cellRenderer: () => (
<>
<ElButton size="small">Edit</ElButton>
<ElButton size="small" type="danger">
Delete
</ElButton>
</>
),
width: 150,
align: 'center',
flexGrow: 1,
},
]
const data = ref(Array.from({ length: 200 }).map(dataGenerator))
const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
if (rowIndex % 10 === 5) {
return 'bg-red-100'
} else if (rowIndex % 10 === 0) {
return 'bg-blue-200'
}
return ''
}
</script>隐藏源代码
表格行的粘性布局
您可以简单地使用 fixed-data 属性来实现将某些行固定到表格的头部。
您可以根据滚动事件动态设置粘性行，如这个示例所示。
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
vue
<template>
<el-table-v2
:columns="columns"
:data="tableData"
:fixed-data="fixedData"
:width="700"
:height="400"
:row-class="rowClass"
fixed
@scroll="onScroll"
/>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 200)
const rowClass = ({ rowIndex }) => {
if (rowIndex < 0 || (rowIndex + 1) % 5 === 0) return 'sticky-row'
}
const stickyIndex = ref(0)
const fixedData = computed(() =>
data.slice(stickyIndex.value, stickyIndex.value + 1)
)
const tableData = computed(() => {
return data.slice(1)
})
const onScroll = ({ scrollTop }) => {
stickyIndex.value = Math.floor(scrollTop / 250) * 5
}
</script>
<style>
.el-el-table-v2__fixed-header-row {
background-color: var(--el-color-primary-light-5);
font-weight: bold;
}
</style>隐藏源代码
固定列表格
如果您想要有列粘贴左侧或右侧的某种原因。 您可以通过向表中添加特殊属性来实现这一点。
您可以设置该行的 fixed 属性为 true （代表FixedDir.LEFT）、FixedDir.LEFT 或 FixedDir.RIGHT
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Row 0 - Col 0
Row 0 - Col 1
Row 1 - Col 0
Row 1 - Col 1
Row 2 - Col 0
Row 2 - Col 1
Row 3 - Col 0
Row 3 - Col 1
Row 4 - Col 0
Row 4 - Col 1
Row 5 - Col 0
Row 5 - Col 1
Row 6 - Col 0
Row 6 - Col 1
Row 7 - Col 0
Row 7 - Col 1
Row 8 - Col 0
Row 8 - Col 1
Column 0
Column 1
Row 0 - Col 9
Row 1 - Col 9
Row 2 - Col 9
Row 3 - Col 9
Row 4 - Col 9
Row 5 - Col 9
Row 6 - Col 9
Row 7 - Col 9
Row 8 - Col 9
Column 9
vue
<template>
<el-table-v2
:columns="columns"
:data="data"
:sort-by="sortBy"
:width="700"
:height="400"
fixed
@column-sort="onSort"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { TableV2FixedDir, TableV2SortOrder } from 'element-plus'
import type { SortBy } from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
let data = generateData(columns, 200)
columns[0].fixed = true
columns[1].fixed = TableV2FixedDir.LEFT
columns[9].fixed = TableV2FixedDir.RIGHT
for (let i = 0; i < 3; i++) columns[i].sortable = true
const sortBy = ref<SortBy>({
key: 'column-0',
order: TableV2SortOrder.ASC,
})
const onSort = (_sortBy: SortBy) => {
data = data.reverse()
sortBy.value = _sortBy
}
</script>隐藏源代码
表头分组
正如这个示例，通过自定义表头渲染以将表头分组。
TIP
在这种情况下，我们使用了 JSX 功能，这个功能在playground上不被支持。 您可以在本地环境或在线集成开发环境（如 codesandbox ）中试用它们。
建议您使用 JSX 使用您的表格组件，因为它包含 VNode 操作。
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 0 - Col 10
Row 0 - Col 11
Row 0 - Col 12
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 1 - Col 10
Row 1 - Col 11
Row 1 - Col 12
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 2 - Col 10
Row 2 - Col 11
Row 2 - Col 12
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 3 - Col 10
Row 3 - Col 11
Row 3 - Col 12
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 4 - Col 10
Row 4 - Col 11
Row 4 - Col 12
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 5 - Col 10
Row 5 - Col 11
Row 5 - Col 12
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 6 - Col 10
Row 6 - Col 11
Row 6 - Col 12
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 7 - Col 10
Row 7 - Col 11
Row 7 - Col 12
Group width 400
Group width 400
Group width 200
Group width 200
Group width 200
Group width 200
Group width 200
Group width 200
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Column 10
Column 11
Column 12
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Group width 300
Group width 200
Group width 100
Column 0
Column 1
Column 2
Row 0 - Col 13
Row 0 - Col 14
Row 1 - Col 13
Row 1 - Col 14
Row 2 - Col 13
Row 2 - Col 14
Row 3 - Col 13
Row 3 - Col 14
Row 4 - Col 13
Row 4 - Col 14
Row 5 - Col 13
Row 5 - Col 14
Row 6 - Col 13
Row 6 - Col 14
Row 7 - Col 13
Row 7 - Col 14
Group width 200
Group width 200
Column 13
Column 14
vue
<template>
<el-table-v2
fixed
:columns="fixedColumns"
:data="data"
:header-height="[50, 40, 50]"
:header-class="headerClass"
:width="700"
:height="400"
>
<template #header="props">
<customized-header v-bind="props" />
</template>
</el-table-v2>
</template>
<script lang="tsx" setup>
import { TableV2FixedDir, TableV2Placeholder } from 'element-plus'
import type { FunctionalComponent } from 'vue'
import type {
HeaderClassNameGetter,
TableV2CustomizedHeaderSlotParam,
} from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(15)
const data = generateData(columns, 200)
const fixedColumns = columns.map((column, columnIndex) => {
let fixed: TableV2FixedDir | undefined = undefined
if (columnIndex < 3) fixed = TableV2FixedDir.LEFT
if (columnIndex > 12) fixed = TableV2FixedDir.RIGHT
return { ...column, fixed, width: 100 }
})
const CustomizedHeader: FunctionalComponent<
TableV2CustomizedHeaderSlotParam
> = ({ cells, columns, headerIndex }) => {
if (headerIndex === 2) return cells
const groupCells = [] as typeof cells
let width = 0
let idx = 0
columns.forEach((column, columnIndex) => {
if (column.placeholderSign === TableV2Placeholder)
groupCells.push(cells[columnIndex])
else {
width += cells[columnIndex].props!.column.width
idx++
const nextColumn = columns[columnIndex + 1]
if (
columnIndex === columns.length - 1 ||
nextColumn.placeholderSign === TableV2Placeholder ||
idx === (headerIndex === 0 ? 4 : 2)
) {
groupCells.push(
<div
class="flex items-center justify-center custom-header-cell"
role="columnheader"
style={{
...cells[columnIndex].props!.style,
width: `${width}px`,
}}
>
Group width {width}
</div>
)
width = 0
idx = 0
}
}
})
return groupCells
}
const headerClass = ({
headerIndex,
}: Parameters<HeaderClassNameGetter<any>>[0]) => {
if (headerIndex === 1) return 'el-primary-color'
return ''
}
</script>
<style>
.el-el-table-v2__header-row .custom-header-cell {
border-right: 1px solid var(--el-border-color);
}
.el-el-table-v2__header-row .custom-header-cell:last-child {
border-right: none;
}
.el-primary-color {
background-color: var(--el-color-primary);
color: var(--el-color-white);
font-size: 14px;
font-weight: bold;
}
.el-primary-color .custom-header-cell {
padding: 0 4px;
}
</style>隐藏源代码
过滤器
虚拟表格提供自定义页眉渲染器以创建自定义标题。 然后我们可以利用这些来渲染过滤器。
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
Row 0 - Col 0
Row 0 - Col 1
Row 1 - Col 0
Row 1 - Col 1
Row 2 - Col 0
Row 2 - Col 1
Row 3 - Col 0
Row 3 - Col 1
Row 4 - Col 0
Row 4 - Col 1
Row 5 - Col 0
Row 5 - Col 1
Row 6 - Col 0
Row 6 - Col 1
Row 7 - Col 0
Row 7 - Col 1
Row 8 - Col 0
Row 8 - Col 1
Column 0
Column 1
vue
<template>
<el-table-v2
fixed
:columns="fixedColumns"
:data="data"
:width="700"
:height="400"
/>
</template>
<script lang="tsx" setup>
import { ref } from 'vue'
import {
ElButton,
ElCheckbox,
ElIcon,
ElPopover,
TableV2FixedDir,
} from 'element-plus'
import { Filter } from '@element-plus/icons-vue'
import type { HeaderCellSlotProps } from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = ref(generateData(columns, 200))
const shouldFilter = ref(false)
const popoverRef = ref()
const onFilter = () => {
popoverRef.value.hide()
if (shouldFilter.value) {
data.value = generateData(columns, 100, 'filtered-')
} else {
data.value = generateData(columns, 200)
}
}
const onReset = () => {
shouldFilter.value = false
onFilter()
}
columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
return (
<div class="flex items-center justify-center">
<span class="mr-2 text-xs">{props.column.title}</span>
<ElPopover ref={popoverRef} trigger="click" {...{ width: 200 }}>
{{
default: () => (
<div class="filter-wrapper">
<div class="filter-group">
<ElCheckbox v-model={shouldFilter.value}>
Filter Text
</ElCheckbox>
</div>
<div class="el-table-v2__demo-filter">
<ElButton text onClick={onFilter}>
Confirm
</ElButton>
<ElButton text onClick={onReset}>
Reset
</ElButton>
</div>
</div>
),
reference: () => (
<ElIcon class="cursor-pointer">
<Filter />
</ElIcon>
),
}}
</ElPopover>
</div>
)
}
const fixedColumns = columns.map((column, columnIndex) => {
let fixed: TableV2FixedDir | undefined = undefined
if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
if (columnIndex > 9) fixed = TableV2FixedDir.RIGHT
return { ...column, fixed, width: 100 }
})
</script>
<style>
.el-table-v2__demo-filter {
border-top: var(--el-border);
margin: 12px -12px -12px;
padding: 0 12px;
display: flex;
justify-content: space-between;
}
</style>隐藏源代码
可排序表格
您可以使用排序状态来对表格进行排序。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2
:columns="columns"
:data="data"
:sort-by="sortState"
:width="700"
:height="400"
fixed
@column-sort="onSort"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { TableV2SortOrder } from 'element-plus'
import type { SortBy } from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
let data = generateData(columns, 200)
columns[0].sortable = true
const sortState = ref<SortBy>({
key: 'column-0',
order: TableV2SortOrder.ASC,
})
const onSort = (sortBy: SortBy) => {
console.log(sortBy)
data = data.reverse()
sortState.value = sortBy
}
</script>隐藏源代码
受控的排序
您可以在需要时定义多个可排序的列。 请记住，当您在定义了多个可排序的列时， UI 可能会显得有些奇怪，因为用户不知道哪一列被排序。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2
v-model:sort-state="sortState"
:columns="columns"
:data="data"
:width="700"
:height="400"
fixed
@column-sort="onSort"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { TableV2SortOrder } from 'element-plus'
import type { SortBy, SortState } from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = ref(generateData(columns, 200))
columns[0].sortable = true
columns[1].sortable = true
const sortState = ref<SortState>({
'column-0': TableV2SortOrder.DESC,
'column-1': TableV2SortOrder.ASC,
})
const onSort = ({ key, order }: SortBy) => {
sortState.value[key] = order
data.value = data.value.reverse()
}
</script>隐藏源代码
高亮显示鼠标悬停单元格
当处理一个大的列表时，很容易丢失当前行的轨迹和您正在访问的一列。 在这种情况下，使用这个功能可能很有帮助。
vue
<template>
<div style="height: 400px">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:columns="columns"
:cell-props="cellProps"
:class="kls"
:data="data"
:width="width"
:height="height"
/>
</template>
</el-auto-resizer>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
columns.unshift({
key: 'column-n-1',
width: 50,
title: 'Row No.',
cellRenderer: ({ rowIndex }) => `${rowIndex + 1}`,
align: 'center',
})
const data = generateData(columns, 200)
const cellProps = ({ columnIndex }) => {
const key = `hovering-col-${columnIndex}`
return {
['data-key']: key,
onMouseenter: () => {
kls.value = key
},
onMouseleave: () => {
kls.value = ''
},
}
}
const kls = ref<string>('')
</script>
<style>
.hovering-col-0 [data-key='hovering-col-0'],
.hovering-col-1 [data-key='hovering-col-1'],
.hovering-col-2 [data-key='hovering-col-2'],
.hovering-col-3 [data-key='hovering-col-3'],
.hovering-col-4 [data-key='hovering-col-4'],
.hovering-col-5 [data-key='hovering-col-5'],
.hovering-col-6 [data-key='hovering-col-6'],
.hovering-col-7 [data-key='hovering-col-7'],
.hovering-col-8 [data-key='hovering-col-8'],
.hovering-col-9 [data-key='hovering-col-9'],
.hovering-col-10 [data-key='hovering-col-10'] {
background: var(--el-table-row-hover-bg-color);
}
[data-key='hovering-col-0'] {
font-weight: bold;
user-select: none;
pointer-events: none;
}
</style>隐藏源代码
横跨列
虚拟化表格没有使用内置的 table 元素，故 colspan 和 rowspan 与 TableV1 比较略有不同。 然而，通过定制的行渲染器，这些功能仍然可以实现。 在本节中，我们将演示如何实现这一点。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
<template #row="props">
<Row v-bind="props" />
</template>
</el-table-v2>
</template>
<script lang="ts" setup>
import { cloneVNode } from 'vue'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 200)
const colSpanIndex = 1
columns[colSpanIndex].colSpan = ({ rowIndex }) => (rowIndex % 4) + 1
columns[colSpanIndex].align = 'center'
const Row = ({ rowData, rowIndex, cells, columns }) => {
const colSpan = columns[colSpanIndex].colSpan({ rowData, rowIndex })
if (colSpan > 1) {
let width = Number.parseInt(cells[colSpanIndex].props.style.width)
for (let i = 1; i < colSpan; i++) {
width += Number.parseInt(cells[colSpanIndex + i].props.style.width)
cells[colSpanIndex + i] = null
}
const style = {
...cells[colSpanIndex].props.style,
width: `${width}px`,
backgroundColor: 'var(--el-color-primary-light-3)',
}
cells[colSpanIndex] = cloneVNode(cells[colSpanIndex], { style })
}
return cells
}
</script>隐藏源代码
纵跨行
既然我们已经覆盖了 Colspan，那我们也可以覆盖Row也是没问题的。 它与colspan略有不同，但是 的想法基本上是一样的。
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 0
Row 1 - Col 1
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 0
Row 3 - Col 1
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 0
Row 5 - Col 1
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 0
Row 7 - Col 1
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
<template #row="props">
<Row v-bind="props" />
</template>
</el-table-v2>
</template>
<script lang="ts" setup>
import { cloneVNode } from 'vue'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 200)
const rowSpanIndex = 0
columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1
const Row = ({ rowData, rowIndex, cells, columns }) => {
const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
if (rowSpan > 1) {
const cell = cells[rowSpanIndex]
const style = {
...cell.props.style,
backgroundColor: 'var(--el-color-primary-light-3)',
height: `${rowSpan * 50 - 1}px`,
alignSelf: 'flex-start',
zIndex: 1,
}
cells[rowSpanIndex] = cloneVNode(cell, { style })
}
return cells
}
</script>隐藏源代码
同时跨行和跨列
我们当然可以同时使用横跨列与纵跨行来满足您的业务需求！
Row 0 - Col 0
Row 0 - Col 1
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 0 - Col 9
Row 1 - Col 1
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 1 - Col 9
Row 2 - Col 0
Row 2 - Col 1
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 2 - Col 9
Row 3 - Col 1
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 3 - Col 9
Row 4 - Col 0
Row 4 - Col 1
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 4 - Col 9
Row 5 - Col 1
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 5 - Col 9
Row 6 - Col 0
Row 6 - Col 1
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 6 - Col 9
Row 7 - Col 1
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 7 - Col 9
Row 8 - Col 0
Row 8 - Col 1
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Row 8 - Col 9
Column 0
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Column 9
vue
<template>
<el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
<template #row="props">
<Row v-bind="props" />
</template>
</el-table-v2>
</template>
<script lang="tsx" setup>
import { cloneVNode } from 'vue'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10)
const data = generateData(columns, 200)
const colSpanIndex = 1
columns[colSpanIndex].colSpan = ({ rowIndex }) => (rowIndex % 4) + 1
columns[colSpanIndex].align = 'center'
const rowSpanIndex = 0
columns[rowSpanIndex].rowSpan = ({ rowIndex }) =>
rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1
const Row = ({ rowData, rowIndex, cells, columns }) => {
const colSpan = columns[colSpanIndex].colSpan({ rowData, rowIndex })
if (colSpan > 1) {
let width = Number.parseInt(cells[colSpanIndex].props.style.width)
for (let i = 1; i < colSpan; i++) {
width += Number.parseInt(cells[colSpanIndex + i].props.style.width)
cells[colSpanIndex + i] = null
}
const style = {
...cells[colSpanIndex].props.style,
width: `${width}px`,
backgroundColor: 'var(--el-color-primary-light-3)',
}
cells[colSpanIndex] = cloneVNode(cells[colSpanIndex], { style })
}
const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
if (rowSpan > 1) {
const cell = cells[rowSpanIndex]
const style = {
...cell.props.style,
backgroundColor: 'var(--el-color-danger-light-3)',
height: `${rowSpan * 50}px`,
alignSelf: 'flex-start',
zIndex: 1,
}
cells[rowSpanIndex] = cloneVNode(cell, { style })
} else {
const style = cells[rowSpanIndex].props.style
// override the cell here for creating a pure node without pollute the style
cells[rowSpanIndex] = (
<div style={{ ...style, width: `${style.width}px` }} />
)
}
return cells
}
</script>隐藏源代码
树形数据
虚拟表也可以在树状结构中呈现数据。 点击箭头图标，你可以展开或折叠树节点。
Row 0 - Col 2
Row 0 - Col 3
Row 0 - Col 4
Row 0 - Col 5
Row 0 - Col 6
Row 0 - Col 7
Row 0 - Col 8
Row 1 - Col 2
Row 1 - Col 3
Row 1 - Col 4
Row 1 - Col 5
Row 1 - Col 6
Row 1 - Col 7
Row 1 - Col 8
Row 2 - Col 2
Row 2 - Col 3
Row 2 - Col 4
Row 2 - Col 5
Row 2 - Col 6
Row 2 - Col 7
Row 2 - Col 8
Row 3 - Col 2
Row 3 - Col 3
Row 3 - Col 4
Row 3 - Col 5
Row 3 - Col 6
Row 3 - Col 7
Row 3 - Col 8
Row 4 - Col 2
Row 4 - Col 3
Row 4 - Col 4
Row 4 - Col 5
Row 4 - Col 6
Row 4 - Col 7
Row 4 - Col 8
Row 5 - Col 2
Row 5 - Col 3
Row 5 - Col 4
Row 5 - Col 5
Row 5 - Col 6
Row 5 - Col 7
Row 5 - Col 8
Row 6 - Col 2
Row 6 - Col 3
Row 6 - Col 4
Row 6 - Col 5
Row 6 - Col 6
Row 6 - Col 7
Row 6 - Col 8
Row 7 - Col 2
Row 7 - Col 3
Row 7 - Col 4
Row 7 - Col 5
Row 7 - Col 6
Row 7 - Col 7
Row 7 - Col 8
Row 8 - Col 2
Row 8 - Col 3
Row 8 - Col 4
Row 8 - Col 5
Row 8 - Col 6
Row 8 - Col 7
Row 8 - Col 8
Column 2
Column 3
Column 4
Column 5
Column 6
Column 7
Column 8
Row 0 - Col 0
Row 0 - Col 1
Row 1 - Col 0
Row 1 - Col 1
Row 2 - Col 0
Row 2 - Col 1
Row 3 - Col 0
Row 3 - Col 1
Row 4 - Col 0
Row 4 - Col 1
Row 5 - Col 0
Row 5 - Col 1
Row 6 - Col 0
Row 6 - Col 1
Row 7 - Col 0
Row 7 - Col 1
Row 8 - Col 0
Row 8 - Col 1
Column 0
Column 1
Row 0 - Col 9
Row 1 - Col 9
Row 2 - Col 9
Row 3 - Col 9
Row 4 - Col 9
Row 5 - Col 9
Row 6 - Col 9
Row 7 - Col 9
Row 8 - Col 9
Column 9
vue
<template>
<el-table-v2
v-model:expanded-row-keys="expandedRowKeys"
:columns="columns"
:data="treeData"
:width="700"
:expand-column-key="expandColumnKey"
:height="400"
fixed
@row-expand="onRowExpanded"
@expanded-rows-change="onExpandedRowsChange"
/>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { TableV2FixedDir } from 'element-plus'
import type { ExpandedRowsChangeHandler, RowExpandHandler } from 'element-plus'
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
key: `${prefix}${columnIndex}`,
dataKey: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 150,
}))
const generateData = (
columns: ReturnType<typeof generateColumns>,
length = 200,
prefix = 'row-'
) =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
return rowData
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
}
)
})
const columns = generateColumns(10).map((column, columnIndex) => {
let fixed!: TableV2FixedDir
if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
if (columnIndex > 8) fixed = TableV2FixedDir.RIGHT
return { ...column, fixed }
})
const data = generateData(columns, 200)
const expandColumnKey = 'column-0'
// add some sub items
for (let i = 0; i < 50; i++) {
data.push(
{
...data[0],
id: `${data[0].id}-sub-${i}`,
parentId: data[0].id,
[expandColumnKey]: `Sub ${i}`,
},
{
...data[2],
id: `${data[2].id}-sub-${i}`,
parentId: data[2].id,
[expandColumnKey]: `Sub ${i}`,
},
{
...data[2],
id: `${data[2].id}-sub-sub-${i}`,
parentId: `${data[2].id}-sub-${i}`,
[expandColumnKey]: `Sub-Sub ${i}`,
}
)
}
function unflatten(
data: ReturnType<typeof generateData>,
rootId = null,
dataKey = 'id',
parentKey = 'parentId'
) {
const tree: any[] = []
const childrenMap = {}
for (const datum of data) {
const item = { ...datum }
const id = item[dataKey]
const parentId = item[parentKey]
if (Array.isArray(item.children)) {
childrenMap[id] = item.children.concat(childrenMap[id] || [])
} else if (!childrenMap[id]) {
childrenMap[id] = []
}
item.children = childrenMap[id]
if (parentId !== undefined && parentId !== rootId) {
if (!childrenMap[parentId]) childrenMap[parentId] = []
childrenMap[parentId].push(item)
} else {
tree.push(item)
}
}
return tree
}
const treeData = computed(() => unflatten(data))
const expandedRowKeys = ref<string[]>([])
const onRowExpanded = ({ expanded }: Parameters<RowExpandHandler<any>>[0]) => {
console.log('Expanded:', expanded)
}
const onExpandedRowsChange = (
expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]
) => {
console.log(expandedKeys)
}
</script>隐藏源代码
动态高度行
虚拟表能够呈现具有动态高度的行数。 如果您正在处理数据并不确定内容大小， 此功能对于调整到内容高度的渲染行是理想的。 要启用此功能，请传递 estimated-row-height 属性。 估计高度越接近实际内容，渲染体验就越顺。
TIP
每行高度在渲染过程中动态测量。 因此，如果您试图显示大量数据， UI 可能会 抖动。
Tom
Quaerat ipsam necessitatibus eum quibusdam est id voluptatem cumque mollitia.
Tom
Quaerat ipsam necessitatibus eum quibusdam est id voluptatem cumque mollitia.
Tom
Eius optio fugiat.
Tom
Eius optio fugiat.