vue树形多列_基于element-ui el-table 开发虚拟列表(树形列表)

前言

基于之前支持表单验证的el-table开发完成后,在数据量过大的时候,会出现渲染慢,表格卡顿等致命问题,而element-ui的el-table本身没有像antd一样提供虚拟列表的demo和相关支持,因此本文在上次的开发基础上,继而开展虚拟列表的开发。本次分为普通列表和树形列表两种,树形在普通列表上面多了一些情况考虑,例如展开收缩等。

虚拟列表

虚拟列表简单概述就是滚动分页,通过有限的视口来切片大量的数据,因为相比于js运算,渲染是一个很慢的过程,因此通过一定的js计算,保证更少的数据渲染,通常可以获得更好的用户体验。一般虚拟列表可以通过上下的动态padding值,来是滚动区域一直显示当前切片出的数据,以及通过transform的方法来动态移动可视区。transform这种方法理论上性能要好一些,因为浏览器渲染本身是分图层渲染的,而transform操作的视图,会被浏览器单独分层出来,渲染性能更优。

下图两种方式:

本次el-table 上的虚拟列表,采用了padding的方案,原因是transform 会使el-table的样式混乱,如果是自己开发的table或者其他魔改支持度较好的插件的话优先transform。

普通列表

首先看一下el-table 渲染300 条的速度。

本次的测试代码有300条,本身并不多,但是有8列都是插槽中渲染的表单组件,因此渲染速度要慢很多,时间花销6s+。(antd 的table渲染要快一些,后面说原因)

增加虚拟列表后渲染速度:

开发流程

step1

计算总高度

height = list.length * 65

// height 为列表实际总高度

// 65 为每一行的行高,根据实际修改

// list为实际数据长度

step2

计算上下padding值

paddingTop = scrollTop + "px";

paddingBottom = height - 10 * 65 - scrollTop + "px";

// scrollTop 为滚动的高度,即列表向下滚动的距离

// height 总高度

// 10为实际渲染的条数

你可能感兴趣的:(vue树形多列)