您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

前言

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 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>
  • 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” (

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索