elementui表格性能优化123

最新推荐文章于 2024-08-15 23:24:24 发布

GoNotBack

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量1.1w

点赞数 1

分类专栏： web前端 javascript vue element

本文链接：https://blog.csdn.net/GoNotBack/article/details/79820369

版权

本文介绍了在使用ElementUI重构项目时遇到的表格性能问题，分析了ElementUI表格的源码，发现数据量大时性能下降。通过对比vue-easytable，决定优化表格的界面生成方式，采用template替代render，并进行事件委托。文中提出了两种优化方案：1. 使用自定义小组件渲染；2. 根据需求手动判断生成界面。测试结果显示，这两种方式在数据量小的情况下性能提升显著，但不同场景下优缺点各异。

摘要由CSDN通过智能技术生成

最近公司需要使用vue重构以前的项目，为了节省时间快速开发选择了使用element

不得不说，咋一看element的功能很全面样式，该有的都用，但是我们的项目对性能要求比较高，特别是表格

开发过程比较顺利各功能实现都很不难，但是性能测试确成了问题，分页的情况下单页100条就不怎么流畅了，更别说要求不分页5000条，直接加载过程中内存爆掉卡死了，于是开始了分析源码的路；

找到element/packages/table/src表格的代码都在这里

入口是table.vue 我们要看的是具体数据生成部分看名字就知道是table-body.js

点进去一看，你基本就知道性能慢是个什么情况了，整体使用vue的render方法生成整个界面，整个table部分

render(h) {
	const columnsHidden = this.columns.map((column, index) => this.isColumnHidden(index));
	return (
	<table
	class="el-table__body"
	cellspacing="0"
	cellpadding="0"
	border="0">
	<colgroup>
	{
	this._l(this.columns, column => <col name={ column.id } />)
	}
	</colgroup>
	<tbody>
	{
	this._l(this.data, (row, $index) =>
	[<tr
	style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
	key={ this.table.rowKey ? this.getKeyOfRow(row, $index) : $index }
	on-dblclick={ ($event) => this.handleDoubleClick($event, row) }
	on-click={ ($event) => this.handleClick($event, row) }
	on-contextmenu