问题原因说明（借鉴网友http://1991421.cn/2020/02/05/e968d6d9/）
PC端屏幕显示设置缩放比例对页面布局会有影响如果修改为100%，页面重绘，问题消失在Windows下，Chrome的滚动窗格默认是占据空间，但Mac并不会，这点与版本无关，与系统有关。Mac为何没事，比如Mac下的Chrome,注意到滚动窗格是不计算在宽度之内的，你可以理解为是不同的层错位的直接原因是Windows下设备像素比不是1时，表头的纵向滚动窗格与表格内容的滚动窗格宽度不一致，所以容器宽度与表格内容的宽度也不一致，而列因为我们设定的宽度百分比，造成了两者宽度不一致，所以出现了这个问题。当我们手动将电脑的缩放比例改为100%，这时滚动窗格宽度也就都一致了，所以也就不存在不对齐问题。但为什么设备像素比不是1时，表头的纵向滚动窗格与表格内容的滚动窗格宽度不一致？不知道，maybe都算一个BUG
设备像素比
问题搞明白了，顺便了解下背后的本质原因===_设备像素比_。当我们修改了缩放比例，实际上修改的就是设备像素比,假如我们设定了150%，实际上设备像素比就是1.5，也就是比如普通的文本12px,但实际上物理显示的大小会是18px,当然我们CSS里提示的还会是12px。这就说明了，为什么有时网页看上去字体比别人大。通过JS脚本执行，我们也可以获取实际上的设备像素比.
问题复现
原图
这么严重的bug怎么能放过它，于是我开始了疯狂的百度而得到的答案就是给table的每一列添加固定的宽或者使用百分比，于是我就怀着成功的心态试了很多次最后的结果就是fail，我的心态顿时崩了难道就没办法解决了吗？当然不是的下面开始说解决办法
问题解决
1.为表格添加样式
<Row id='datepicker'>
<Item>
<Table
style={{ wordBreak: 'break-all' }} // 在这里添加样式
dataSource={dataSource}
columns={this.siteTableHeade()}
pagination={false}
size="middle"
rowKey={(record: any) => record.distributionId}
scroll={{ x: this.width }}
/>
</Item>
</Row>
安全起见另外需添加额外的样式
- 给整个
table添加word-break: break-all!important; - 给
table内的每个td添加word-break: break-all!important; - 改变
table下的overflow-y添加
.ant-table-small>.ant-table-content .ant-table-header {
overflow-y: overlay !important;
}
.ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
overflow-y: overlay !important;
}
整体展示
.ant-table-tbody {
.td {
word-break: break-all!important;
}
}
.table {
word-break: break-all!important;
.ant-table-placeholder {
min-height: 450px;
}
}
.ant-table-small>.ant-table-content .ant-table-header {
overflow-y: overlay !important;
}
.ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
overflow-y: overlay !important;
}
2.计算表格的这些列所占的宽度（columndata为表格的表头）
const width = columnData.reduce((total, { width = 0 }) => total + width, 0)
或
let width = 0
columndata.map((obj) =>{
if (obj.width !== undefined) {
width += obj.width
}
})
3.应用width
<Row className="tablist">
<TableItem
ref={tableRef}
rowSelectionFixed
filterKey="projectId"
rowKey={({ projectId }) => projectId}
searchParams={searchParams}
URL={queryMaterialProjectList}
columns={columnData}
scroll={{ x: width }} // 在这里应用
getSelectedRow={this.getSelectedRow} />
</Row>
然后这样就解决了最终的效果图是这样子的
image.png
这样子才对嘛工工整整的漂漂亮亮的就是这么nice
