列表横向 / 纵向滚动体验 Demo

对齐 web-admin Fresh Mint。用下方 Tab 切换「现状问题」与三种改法, 请在灰色模拟视口内纵向滚动到中部、再试横向滚动,感受差异。

问题 1:横滚条在表最底部,行多时够不着 问题 2:纵滚到中部后看不到表头 目标:横滚条常在可视区底部 · 表头始终可见

现状:整页拉长,表跟着页面滚

与多数业务列表一致:表格无固定高度,横向滚动发生在整张表底部。

模拟视口
请先向下滚半屏

复现:① 纵向滚到行 20+ → 表头消失;② 想横看「操作」列 → 必须滚到最底才能碰到横滚条。

已选 0 项
内容区可视范围(向下滚)
共 60 条1 / 3 页(示意)

与现有代码的关系

规范 §7.6 已写 max-height + overflow;HTML demo 也有 sticky 表头。 业务页多数未给 el-table 设高度,bx 的 .table-scroll 仅 overflow-x,故问题仍在。

推荐落地路径

优先方案 A:公共列表用 useListTableViewportHeight 填满视口(分页下 10px),分页留在表外。 列极多的页可再加方案 C 顶条。

注意点

固定高度后筛选区展开会挤表体,需用「视口剩余高度」动态计算; 展开行 / 树表要回归测 doLayout。

看完后请选择倾向方案(可点选,并在对话里告诉我)

A表体内嵌滚动

成本最低,一次修两个问题;与 Element Plus / 规范最贴合。

Bsticky + 悬浮横条

保留「整表随页面变高」;同步逻辑与兼容成本更高。

CA + 顶部镜像条

在 A 上增强横滚可达性;适合列特别宽的列表。