关于vue.js:antdesign-Table组件错位对不齐

9次阅读

共计 640 个字符,预计需要花费 2 分钟才能阅读完成。

1. 纵向 / 列对不齐
1.1. 有列(column) 没有设置宽度:表头固定时,导致表头宽度计算错误,表头列和内容列对不齐

1.2. 语句 / 单词过长:antd 依据语义 / 单词断句换行,理论列宽超出了设置的宽度,导致列对不齐;

1.3. 开启了单选性能:单选列表头宽度计算错误,导致列对不齐

2. 横向 / 行对不齐
2.1. 固定(fixed) 列的高度高于一般列:一般列的高度与 fixed 列的高度不同,导致行对不齐;反之没问题

3. 列间有空白间隙 / 留白
3.1. 列数不固定、需适配不同尺寸屏幕:需适配 4 种状况:小屏列少、小屏列多、大屏列少、大屏列多
为了适配小屏多列,咱们会 fixed 某些列,column 设置的 width 由比例变为 px。
当切到大屏时,同样列数宽度可能铺不满表格

3.2.scroll.x 计算错误:
antd 文档:

倡议指定 scroll.x 为大于表格宽度的固定值或百分比。留神,且非固定列宽度之和不要超过 scroll.x

集体倡议:设置 scroll.x 为所有列的总宽度,包含 fixed 列.

(这里有一条咱们本人零碎的代码须要查看的点:查看 TableContainer 组件是否留有 buffer,有的话移除)

4. 双滚动条
4.1.macOS 在零碎偏好设置为“显示滚动条 - 滚动时”会呈现双滚动条

————————————————
版权申明:本文为 CSDN 博主「超级小码丽」的原创文章,遵循 CC 4.0 BY-SA 版权协定,转载请附上原文出处链接及本申明。
原文链接:https://blog.csdn.net/baozhuo…

正文完
 0