Files
workspace/code/g3soft-libs/.changeset/table-fixed-columns.md
T
2026-10-13 22:32:50 +08:00

5.3 KiB
Raw Blame History

@g3soft/ui
@g3soft/ui
minor

G3Table:序号列固定左侧,并补上 fixedColShadow(固定列阴影开关)。

  • 序号列(seq)现在固定在左侧:横向滚动时行号不再跟着滚走 —— 序号是「这一行是哪一行」的锚点,恰恰是最不该丢的信息。它由组件注入,业务侧不用配,与选择列(同样是 fixed: 'left')保持一致。
    • 这是一个默认行为变化。原先 seq 列会随内容滚动,只有在表格出现横向溢出时才看得出差别;没有溢出时 sticky 不产生任何位移。
    • 序号列宽度会参与左固定列的吸附位移计算,所以调用方业务列的 fixed: 'left' 会自动接在序号列之后,不会出现重叠或空档。
  • 新增 fixedColShadow(默认 false):固定列被滚过去的列遮挡时,在边界画一条 10px 渐变。它对应底座的 fixedColShadow,此前只能靠 $attrs 透传、没有正式 prop(组件 inheritAttrs: false,透传虽然生效但不该是公开用法)。默认关是刻意的:纯观感开关,业务觉得这层渐变糊得脏就可以不开;但有左右冻结列时建议打开,否则冻结列与滚过去的列同为白底、紧贴在一起,看不出边界在哪。
  • 文档新增「固定列」一节(docs/content/ui/data/table.md):fixed 的取值与位置约束、为什么固定列必须写 width、阴影开关该不该开;seq 的 API 说明也标注了「固定左侧」。
  • 修复:固定列上的校验态格子被推离本列。 校验态样式为了让绝对定位的角标有基准,给 td 写了 position: relative,而固定列 td 的 position 是库在用的(被遮挡时 sticky,吸附位移以内联 left / right 写在 td 上)—— 改成 relative 后那条内联 left 变成普通相对位移,整个格子被推开「前面所有左固定列宽度之和」。症状极易误判:只有「固定列 + 校验未通过」的格子位移,看上去就是「错误底色跑到了隔壁两列中间」。现在普通格给 relative、固定列保持 sticky(sticky 本身就是定位值,角标仍以 td 为基准)。(这两条 position 规则随后随「角标整体去掉」一起删除了 —— 成因连根消失,详见 table-validation-editing-yield。)
    • 补了真浏览器几何回归:playground 新增 table-fixed-wrap(左固定两列 + 一行空名称 + 列宽总和超出视口),e2e/table.spec.ts 断言「错误格与本列表头对齐、滚动后随固定列一起吸附」。去掉修复后该用例会红(实测位移 250px)。
  • 修复:受控调用方「点可编辑格进入编辑」时当前行不高亮(:active-row-key + @row-click 那套 fms 写法,点只读格却正常)。根因在浏览器:点可编辑格会挂载编辑器、把 mousedown 命中的 .cell-display 替换掉,Chromium 因此不派发 click,库的 row-click 不触发,调用方那个唯一写入者收不到消息。现在「激活编辑」这条路径(鼠标 / 键盘 / 键盘防抖收尾)无条件同步当前行 —— 对这次手势,组件内部是唯一知道发生了什么的代码,不是第二个写入者。同页的 editRow() 命令式 API 行为不变。
  • 已知限制(已写进文档):固定列与横向虚拟同时开启时,快速横向拖动会出现一帧位移 —— 横向虚拟在表体左侧留的占位是异步更新的,滚动到位而占位还是旧宽度的那一帧,左固定列的静态位置被占位推着走(sticky 只能往右收、不能往左拉),实测偏 258 → 1628(占位全长);右固定列偏差 0,所以只有左侧看得见。已试过在 scroll 里提前重算窗口:无效(合成手势下无改善,且表体多出中间态),故不采用。要绝对稳就 :virtual-x="false";根治需上游把左占位挪到固定列之后。
  • 变更:灰底判据从「编辑行里没有编辑器的格子」改为「这一格现在改不了」+ 常驻。 现在三种情形统一显示灰底(与行是否在编辑无关):列上没有 editor、editor.disabled === true、以及 editor.disabled 为函数且对该行返回 true(动态条件,如「已放舱后状态不可改」)。前两种走 td 类名(不注入 customCell,零运行时开销),第三种由内容节点带标记(只有这些列会被常驻注入)。顺带删掉了旧判据那套「行内是否挂着 input/select 编辑器」的结构性选择器(它只在被点过的那一行可见,且行内有 checkbox 时会误判整行)。「既禁用又校验不过」的格子显示为灰。
  • 修复:悬停 / 当前行时固定列是半透明的。 库给固定列的是 background-color: inherit,而行的 hover / 当前行底色是 alpha 值(--tr-hover-bgc = rgba(0,0,0,.04)、--tr-active-bgc = 皮肤给的 hsl(... / .15));非固定列继承它没问题(tr 底下是表格基色),冻结列却在被横滚的列之上,于是下面的列直接透上来(表现为「编辑行的固定列透字」)。现在冻结列底色写死不透明的 --td-bgc,行状态改用内阴影叠色(画在背景之上、内容之下,不压库的边框渐变、不需要给 td 加定位),hover 与当前行各一条规则。