Ocean Table Component

API

参数 | 说明 | 类型 | 默认值 ---|---|---|--- columns | 表格列的配置, 必传 | array | - dataSource | 表格的数据, 必传 | array | - isComplex | 是否为复合型表头 | boolean | false isVertical | 是否为纵向表格 | boolean | false

组件需求列表

• 支持横向/纵向
• 支持固定列，目前只固定头部。(可扩展为自定义列固定)
• 支持复合表头，目前只要求两级。(可扩展为更多层级)
• 根据外部容器自适应大小。 (这里外部容器只需监听window, 且需要做debounce)
• ~~文本超出时打点，鼠标移入显示tips。~~
• 数据中包含换行符时(/r|/b|/n)，表格文本支持换行。 ~~(由于换行与文本超出打点有冲突, 处理方式为: 若某一行中任意单元格有换行符，则此行无视文本超出打点需求，否则采用文本超出打点的方式。)~~
• 单元格最小宽度110px，不设置最大宽度。
• 表格数据支持图片展示。(头像)
• 表头排序。(暂无要求，可扩展)
• 钻取功能。(暂无要求，可扩展)
• 有表头无数据时显示“暂无数据”，不能报错
• 防御XSS攻击

注意

由于固定表头，上下使用了两个独立的table，为了对齐需要同步两个table的宽度 目前做法是tbody渲染好后，也就是didMount或didUpdate时，取第一行每个单元格的宽度，赋值给thead