Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结

前言

element-plus@2.2.0 后提供虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。

本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考，提供使用思路。

创建了一个项目收纳本文的一些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> <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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

虚拟化表格组件 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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

后续的示例基于 element-plus@2.2.17

二、自定义单元格渲染

jsx/tsx 或 vue 渲染函数

注意，Element Plus 的虚拟化表格组件(TableV2)提供的自定义单元格、表头单元格渲染器都要求返回 VNode。需要使用 jsx/tsx 或者 vue 渲染函数 实现。如无需使用上述两个单元格渲染器，仅作基本数据展示、排序等基本功能的话，可以像 TableV1 一样直接在 vue 单文件组件内使用。

准备工作

本文采用 jsx 实现， Vue CLI 创建的项目可直接在vue单文件组件的 script 标签中添加 lang=“jsx” (