c566d1b728888a651b465d69a6c79cc58c938aea
背景
----
主表共 11 列,原先除 2 列外用 width 硬编码,最小总宽约 1528px;
1440 笔记本可用宽度只有约 1240px(屏幕 - 180 侧边栏 - 20 内边距),
必然撑出横向滚动条,操作按钮被推出屏幕,用户得拖滚动条才能点转交。
一、固定操作列
----
主表操作列原本已有 fixed="right";**明细表的操作列没有**,本次补上。
子表嵌在主表展开区内,容器更窄(两侧各留 40px),不固定更容易被挤出屏幕。
操作列宽度 250 -> 230(实际按钮最多 3 个并存,230 足够)。
二、弹性列宽
----
按「内容长度是否确定」划界:
用 min-width(可伸缩)—— 单号 150 / 借用人 90 / 当前持有人 120 /
归还人 90 / 归还时间·预计 200
用 width(定长) —— 借出时间 160 / 借出物品 80 / 状态 110 /
电子签名 100(原 140,两个小标签用不了那么宽)
展开列本身约 48px,不可控
明细表同步:SKU 120 -> min-width 110;当前持有人 130 -> min-width 120。
主表最小总宽由约 1528px 降到 1378px。
三、长文本省略
----
物料名称、SKU、单号均已带 show-overflow-tooltip —— 超长物料名自动省略号,
悬浮显示全称,不会因单条数据撑爆整表。
★ 如实说明:11 列的表格在 1600px 以上屏幕可完整铺开;1440/1366 笔记本上
仍会保留一条横向滚动条(最小 1378px vs 可用约 1240px),这是列数决定的,
不删列就无法根除。但操作列两级都已吸附最右侧,**用户不再需要滚动即可操作** ——
这正是本次要解决的核心痛点。若要做到零滚动条,需另议「窄屏隐藏次要列
(电子签名/借出物品)」或侧边栏可折叠。
Description
No description provided
Languages
Python
70.2%
CSS
14.9%
Vue
7.6%
HTML
4.2%
TypeScript
3.1%