這幾天在研究如何實現(xiàn)表格的固定列（fixed column）功能徐绑，這里記錄了思路和細節(jié)邪驮。
表格控件比較復雜，應用場景也很多傲茄，各種數(shù)據(jù)展示毅访、統(tǒng)計、操作盘榨，管理應用常用的組件之一喻粹。
Ukelli-UI Table 是為了應對以下應用場景：
- 友好的展示數(shù)據(jù)
- 友好的數(shù)據(jù)交互
- 友好的開發(fā)體驗
- 業(yè)務邏輯和 UI 分離
期望效果
- 固定表頭
- 左右各有一個固定的列
- 自動計算表格 cell 的寬度和高度，并且不能超過一定的長度草巡，并且表頭需要和表體同步寬度守呜，不需要在配置中傳入 UI 相關的寬度信息
實現(xiàn)細節(jié)
- 分為 3 個表格
- mainTable 主體表格
- leftFixedTable 左邊的固定列表格
- rightFixedTable 右邊固定列表格
- 監(jiān)聽 mainTable 和 fixedTable 的 scroll 事件，同步所有的表格的列的顯示區(qū)域
- 向所有的行（ row）元素 tr 監(jiān)聽 mouseenter 事件捷犹，確保鼠標移過對應的行所有的表格都有一致的表現(xiàn)
- 記錄第一列的所有的格子 （ td ）的高度信息弛饭，用于給固定表格的格子高度
- 記錄第一行的格子的寬度信息，給 TableHeader 同步 TableBody 的寬度信息
目前主流的 Table 組件都需要設置列的寬度萍歉，最開始 ukelli-ui 的表格控件也是如此實現(xiàn)的，但是后面發(fā)現(xiàn)這樣有兩個問題
- 定義渲染配置的時候需要額外的 UI 的信息档桃，即 width枪孩，這樣不夠純粹
- 在開發(fā)的時候需要花很多精力在格子寬度上，要做到每一個表頭都不會過長而換行藻肄，影響排版
參考:
- Ukelli-UI/Table https://ui.ukelli.com/#/Table
- 原文地址 https://ukelli.com/2019/03/24/react-table/
