# vue2-element-virtual-table

**Repository Path**: Luo520/vue2-element-virtual-table

## Basic Information

- **Project Name**: vue2-element-virtual-table
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-24
- **Last Updated**: 2026-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 10 万条数据虚拟表格示例

## 项目简介
本项目使用 **Vue 2** 与 **Element UI `el-table`** 实现了在不分页的情况下渲染 **10 万条** 数据的高性能表格。通过监听 `el-table` 滚动容器、切片 `:data` 并结合 `translateY` 偏移，只渲染可视区域的行，极大降低了 DOM 节点数量，实现流畅滚动且几乎无卡顿。

## 技术栈
- Vue 2.6.x
- Element UI 2.15.x（`el-table` 虚拟滚动）
- Webpack 5
- Babel

## 项目结构
```
vue2-element-virtual-table/
├─ public/
│   └─ index.html          # 入口 HTML
├─ src/
│   ├─ components/
│   │   └─ VirtualTable.vue # 虚拟表格组件
│   ├─ App.vue              # 主页面
│   ├─ main.js              # 项目入口，加载 Element UI、全局样式
│   ├─ data.js              # 生成 100000 条模拟数据
│   └─ styles.css           # 全局样式
├─ .babelrc                 # Babel 配置
├─ .gitignore               # Git 忽略文件
├─ package.json             # 依赖与脚本
├─ webpack.config.js        # Webpack 配置
└─ README.md                # 本说明文档
```

## 安装依赖
```bash
npm install
```

## 本地开发
```bash
npm run serve
```
浏览器会自动打开 `http://localhost:8080`，你可以看到表格渲染 10 万条数据且滚动流畅。

## 生产构建
```bash
npm run build
```
构建产物位于 `dist/` 目录，可直接部署到静态服务器。

## 性能要点
- **`el-table` 虚拟滚动**：监听 `.el-table__body-wrapper` 的 `scroll`，`:data` 只传入当前可视切片（约 30~50 行）。
- **滚动高度占位**：给 `.el-table__body` 设置 `height = 总行数 × 行高`，滚动条长度与 10 万行一致。
- **`translateY` 定位**：通过 `tbody` 的 `transform` 将可视行偏移到正确位置，避免滚动错位。
- **固定行高 48px**：行高必须固定，否则虚拟计算会偏差。
- **确定性数据**：初始化时使用简单算法生成 10 万条数据，避免大量 `Math.random()` 拖慢首屏。

## 进一步优化（可选）
- 使用 **懒加载** 或 **分页** 结合业务需求。
- 调整 `min-item-size` 与实际行高匹配，提升滚动精度。
- 在生产环境开启 **gzip**、**缓存** 等 Webpack 优化。

---

如有疑问或需要定制功能，请随时提出！