关于Antd Table组件列宽的一些疑惑

Question

如题所述

Answer 1

前些年参与的几个项目，前端部分主要采用 Vue + ElementUI 进行开发。最近参与的项目，前端部分大胆的转向了 React + Antd 。

在之前的 Vue + ElementUI 项目里， Table 组件列的列宽（各个列的列宽和）如果超过 Table 容器宽度，则会自动出现横向滚动条。另外 Table 组件列的列宽如果达不到 Table 容器宽度， Table 组件的右侧则会留空，不显示任何内容。可以参考Demo复现： https://codesandbox.io/s/elementui-table-column-width-20220314-12secw
而 Antd 中的 Table 组件，列宽的渲染方式似乎和 ElementUI 有点不太一样。在 Antd 中，不管 Table 组件列的列宽有没有超过 Table 容器的宽度，各个列实际渲染的时候，都是按照当前列的列宽占所有列的列宽的拜访比宽度进行渲染的，比如总共有三列A、B、C，宽度分别是 50px 、 50px 、 100px ，A、B、C三列实际渲染宽度分别是 25% 、 25% 、 50% ，并不是期望的 50px 、 50px 、 100px 。刚接触 Antd 的我，对于这种方式有点百思不得其解。
附上 Antd 版的Demo地址： https://codesandbox.io/s/antd-table-column-width-20220314-jx7cli?file=/src/MyTable.js

以上就是我关于 Table 组件的一些疑惑，欢迎大家在评论区进行讨论交流。 : )

参考链接： https://blog.csdn.net/m0_58016522/article/details/123470541