Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
前言
[email protected] 后提供虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。
本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考，提供使用思路。
创建了一个项目收纳本文的一些demos:
element-plus-tablev2-demo
element-plus-tablev2-demo (gitee)
一、Element Plus 表格基础
官方介绍：
“在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 Table V1来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。
通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。”
官方提示：
TIP
该组件仍在测试中，生产环境使用可能有风险。 若您发现了 bug 或问题，请于 GitHub 报告给我们以便修复。 同时，有一些 API 并未在此文档中提及，因为部分还没有开发完全，因此我们不在此提及。
即使虚拟化的表格是高效的，但是当数据负载过大时，网络和内存容量也会成为您应用程序的瓶颈。 因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。
TIP
在 SSR 场景下，您需要将组件包裹在之中 (如: Nuxt) 和 SSG (例如: VitePress).
属性
详见官网，这里只说几点需要注意的地方
- 表格属性: width, height 必填（可使用
AutoResizer组件使表格自动调整大小，使用方式参照官网） - 表格属性 columns 为列 column 的配置数组，这是与表格组件最大的差异之一
- column 的配置中，可定义很多之前定义在 column 模板中的属性
- column 的配置属性中，cellRenderer 自定义单元格渲染是最大的差异（模板 ----> js）
简单使用
表格组件 el-table (TableV1):
<script setup>
const columns = [
{ prop: 'name', label: 'Name', width: 100 },
{ prop: 'age', label: 'Age', width: 100 },
{ prop: 'gender', label: 'Gender', width: 100 },
{ prop: 'tel', label: 'Tel', width: 100 }
]
const tableData = [
{ name: '', age: '', gender: '', tel: '' },
// ...
]
script>
<template>
<el-table :data="tableData">
<el-table-column
v-for="col in columns"
:key="col.prop"
:prop="col.prop"
:label="col.label"
:width="col.width"
/>
el-table>
template>
虚拟化表格组件 el-table-v2 (TableV2):
<script setup>
const columns = [
{ key: 'name', dataKey: 'name', title: 'Name', width: 100 },
{ key: 'age', dataKey: 'age', title: 'Age', width: 100 },
{ key: 'gender', dataKey: 'gender', title: 'Gender', width: 100 },
{ key: 'tel', dataKey: 'tel', title: 'Tel', width: 100 }
]
const tableData = [
{ name: '', age: '', gender: '', tel: '' },
// ...
]
script>
<template>
<el-table-v2
:columns="columns"
:data="tableData"
:width="700"
:height="400"
fixed
/>
template>
后续的示例基于 [email protected]
二、自定义单元格渲染
jsx/tsx 或 vue 渲染函数
注意，Element Plus 的虚拟化表格组件(TableV2)提供的自定义单元格、表头单元格渲染器都要求返回 VNode。需要使用 jsx/tsx 或者 vue 渲染函数 实现。如无需使用上述两个单元格渲染器，仅作基本数据展示、排序等基本功能的话，可以像 TableV1 一样直接在 vue 单文件组件内使用。
准备工作
本文采用 jsx 实现， Vue CLI 创建的项目可直接在vue单文件组件的 script 标签中添加 lang=“jsx” (