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