Ant Design
环境
- 版本4.x
- table组件,宽度和高度均响应式变化
- table scroll 设置
scroll:{x:true|100%, y:100%}
问题
当table发生更新,y轴scrollbar出现时,table column宽度计算出错,table出现宽度错位。
-
问题分析:
table column中有的应用了固定宽度50px
和200
这样的宽度设置,而table的宽度是响应式的。在进行重绘渲染的时候,table的宽度会出现计算错误。const column = [ {title:'序号', width:'50px', dataIndex:'sn'}, {title:'名称', width: 200, dataIndex:'name'}, {title:'年龄', width: 80, dataIndex:'age'}, // ... 其他列 ]
-
问题解决:
设置横向滚动,并将每个column的比例调整到尽量大,保持x轴的scrollbar始终出现,可以快速地解决错位问题。