# big-data-table-share

**Repository Path**: ybfweb/big-data-table-share

## Basic Information

- **Project Name**: big-data-table-share
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-29
- **Last Updated**: 2023-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大数据表格
## 问题
* 零售商后台的自定义报表页面开发时遇到数据量大页面卡问题
* 大商企经营指标报表卡顿
## 已有的虚拟滚动表格
* [vxe-table](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install)
* [ant design](https://ant.design/components/table-cn/#components-table-demo-virtual-list)
* [spreadjs](https://www.grapecity.com.cn/developer/spreadjs?utm_source=baidu&utm_medium=cpc&utm_term=SpreadJS&utm_campaign=Spread)  excel

## 对比
> element table  
列：204 行：20 
![element](static/img/1.png)

> virtual table  
列：204 行：20
![table](static/img/2.png)

> element table  
列：204 行：100
![element](static/img/3.png)

> virtual table  
列：204 行：100
![table](static/img/4.png)

> virtual table  
列：204 行：10000
![table](static/img/5.png)

## 虚拟滚动表格原理
* 只渲染用户可以看见的数据
* 看不见的地方计算高度位子用padding撑开维持滚动条的状态正常 
![table](static/img/6.png)

## 任然纯在的问题
1. 表格的行不能任意高度,不能被内容高度撑开
2. 合并行过多，或者列过多性能极具下降
3. 滚动没有vxe顺滑

## 优化方向
参见ant design用非table的方式实现
原生安卓列表滚动的实现原理
[闲鱼APP长列表](https://blog.csdn.net/weixin_38912070/article/details/109376100)