15 lines
2.8 KiB
Markdown
15 lines
2.8 KiB
Markdown
---
|
|
'@g3soft/ui': minor
|
|
---
|
|
|
|
G3Table：表体的纵向列线关闭，表头保留一条更轻的「短竖线」列界。
|
|
|
|
- **表体去掉纵向格线**：覆盖层把底座的 `--bg-border-right` / `--bg-border-left` 涂成透明渐变 —— 库给每个 `th`/`td` 铺的就是 `background-image: var(--bg-border-right), var(--bg-border-bottom)`，所以关掉这一个变量就够了。横线（`--bg-border-bottom`）与自绘圆角外框**完全不受影响**，它们走的是另外两条路径。
|
|
- 「按列摘线」那套已整体删除：早先为「最右列外侧线归外框管」写过 `th/td:last-child` 与右固定列的摘线规则，那个假设只在「列宽铺满容器」时成立（列宽不足时表现为「线没了 + 右侧留白」，有右固定列且横滚时更是摘错了对象）。
|
|
- **表头保留列界，但换成「短竖线」**：`th` 自己接管 `background-image`，画一条高 `calc(100% - 8px)`（上下各留 4px）、宽 1px 的短线，颜色用新增的 `--g3-table-header-divider`（亮 8% 的黑 ≈ #e1e1e1 / 暗 12% 的白，比 `--border-color` 那档格线色轻一档）。列界仍是「认列 / 拖列宽」的落点，但在比数据行更高的表头上不会顶满上下，观感更柔和。
|
|
- 为什么接管**整个** `background-image` 而不是只改其中一层：`background-image` / `-size` / `-position` 都是**按层一一对应**的列表属性，而库的层数并不固定（表头首行是 top/right/bottom 三层、多级表头的其它行只有两层）——只补 size / position 会把尺寸套到错误的层上（实测把竖线铺成整格色块）。
|
|
- 无框模式（`bordered: false`）不受影响：规则限定在 `.stk-table.bordered` 下。
|
|
- 贴住外框内右缘的右固定列用 `:not(.fixed-cell--right)` 排除，避免那条线与外框 `border` 并排成 2px；「DOM 末列」不排除（它是拖拽该列宽度的落点，列宽没铺满容器时也靠它指出末列到哪儿结束）。
|
|
- **固定列在数据区的边界改由 `fixedColShadow` 承载**：表体既无竖线，冻结列与滚过去的列又同为不透明基色、紧贴在一起，边界只剩那 10px 渐变能表达。用到左右冻结列的页面**务必**打开 `fixedColShadow`（默认仍为 `false`，不改默认值是刻意的：没有固定列的表格开它什么都画不出来；`g3soft-erp` 的订舱页早已显式开着）。
|
|
- 同步更新：`docs/content/ui/data/table.md` 的「固定列」与「实现说明」两处；`e2e/table.spec.ts` 的两条用例（表体只剩横线一条 / 表头短竖线的尺寸、位置与色值），并顺手抽出一个 `splitCssLayers` —— 按**顶层逗号**切 CSS 列表值，替掉原先 `split(/,(?![^(]*\))/)` 那种在 `rgba(` 前会失灵的写法（它把 `linear-gradient(rgba(...), rgba(...))` 切成两层，把「两条线」数成三条）。
|