安装

npm i gm-web-excel-table

调试

npm run dev

发布

npm run pub

需求

1. 表格自由灵活配置: 可以是订单|商品|任意品类表格
2. 快捷的按键编辑功能
   1. 上下移动切换跟随
   2. Ctrl+F 表格内搜索 + 快速定位
   3. Ctrl + Z | Ctrl + R 单元格或行列 撤销/重做
   4. 其它需要满足的按键需求
3. 鼠标编辑功能
   1. 点击跟随|聚焦|编辑
   2. hover查看相关内容
   3. 滚动下拉新增行
4. 自动校验：对内容的合法校验
5. 定时保存: 内容防丢失
6. 性能提升: 大数据加载|提交

实现

容器组件即 GmExcelTable

通过配置不同的数据行列|事件|命令|单元格实现表格多态

命令管理

1. 注册业务HotKey
2. 实现/注册业务事务子类
3. 具体命令需求:
   1. Undo：单元格编辑 | 行列编辑
   2. Redo：单元格编辑 | 行列编辑
   3. 点击聚焦: 单击聚焦单元格、双击： 编辑单元格或聚焦行(由命令决定)
   4. 方向键移动：移动聚焦单元格
   5. 删除键：删除聚焦单元格或者行

数据管理

1. 数据接入与映射：基本增删查改
2. TrieTreeSeach: 低时间复杂度查询
3. 实时保存|缓存

行列管理

1. 配置默认行列属性
2. 拓展增删行列方法 (自动添加/删除行列等)
3. 行列校验

单元格管理器

1. 单元格共有属性配置：follow|focus|editable|position
2. 提供聚焦、定位、跟随等接口
3. 统一处理通用事件
4. 处理通用UI逻辑：校验报错提示

单元格组件

• 抽象基类: 基本参数 | 校验 | 类型key

• 具体实现:

  • 文字输入编辑组件
  • 数字输入编辑组件
  • 搜索选择组件
  • 下拉选择组件
  • 日历选择组件
  • 按钮组件

  // TODO 放弃使用 react-data-sheet