仿Excel (React hook) 文章待续

Excel Editor 实现 (Virtual Table 部分)

该小项目已经初步完成，写该文章是来练习写文章的。 目前文章进度较慢。

技术栈

• react (hooks)
• typescript

项目及微软ExcelOnline

喜欢就给上star吧

小项目演示地址

小项目Github地址

Microsoft Excel online

背景

面试须要作一个小项目，下面是该项目的题目：

使用 TypeScript 开发一个简易版的 Excel WebApp，实现 column & row sort，cell edit，cell calculate 等，能够定义该 MVP 功能集。能够不借助框架或者使用主流框架

问题

• Typescript 之前有了解，可是是第一次使用，简单的使用应该不成问题。
• Excel 是要实现到何种程度？
• 功能实现，排序，编辑好说，计算这一个是要实现与Excel相同的函数功能么？
• 框架仍是要用的，毕竟时间有限这里准备直接使用create react app来开始项目

思考

从上面总结的问题只有两个地方比较不确认。

• 描述中提到了Excel， Excel只是表格，若是只是作成简单的表格恐怕不能获得太多的关注，这里决定作出与Excel同样的VirtualTable功能
• 基于上面的virtualtable，实现排序编辑和计算的功能。

基本的方向定了后即是整个实现步骤

• 基本的virtualtable实现
• 选区功能的实现
• 基于选区功能的其它功能实现（设计成插件方式，各个功能独立分隔）

Virtual Table 实现

如图所示，咱们渲染的表格将以上图所示进行动态计算 （横向同理）

• 考虑到视口大小是不固定以及每一页的大小是固定的，可能会出现当前视口远远大于固定的页面大小，就会出现预加载的内容都没法填充当前视口。咱们将引入一个动态的变量来加大Perload和Rearload页面的数量以解决这个问题。具体处理即是 Math.ceil(offsetHeight / Page(水平或者垂直)Size)