模块:

  • cell
    • 单元格样式（默认一个style传入，或者用户自定义renderCell）
      • text-align
      • color
      • bg-color
      • font-size
  • row（一行有tr标签包裹，定义cell后基本不怎么需要）

  • empty-view,表格没有数据时的展示

    Table逻辑

    1.变量

  • 横向/纵向（移动端考虑，或者直接全部纵向就好了）

  • sticky 列表头
    • 需要通过测试看是否支持position:sticky
    • 冻结列表头
  • DataSource
  • columns
    • key
    • name
    • width
    • format
    • lock
  • 表格自己的数据map方便快速读取

2.方法

  • 格式化数据（需要根据表格的样式去自行格式化，主要是方便读取）
    • 数据源变化时，diff数据源，只修改变化的部分,immer.js
  • 计算冻结列头函数
    • 把表格分为列头行和内容两部分
    • 内容部分向下应偏移列头的高度
  • 容器
    • 容器的宽高计算
    • 监听window的滚动事件，计算偏移和样式
    • 计算可以展示的行列数
    • 也可通过transform来做
  • 渲染行

  • 渲染表头

    • 左、上表头特殊渲染

      树形表头

  • 根据是否有children=》是否可以展开

  • 根据key=》是否默认展开
  • 缩进=》层级level
  1. props
    • 数据id
    • 原始数据源
    • 列配置
    • 默认展开key数组
  2. state

  3. 方法
    • 根据原数据源生产表格需要的层级结构
    • 表格展示需要的数据
    • 点击层次器时，控制层级的渲染
    • 计算缩进层级函数

      工具

  • 数据格式化
  • 构建树形结构