在React项目中使用Ant Design表格时，遇到固定列遮挡可移动列的问题，特别是当列包含勾选框时。问题源于勾选框在不同表格中的宽度不一致。解决方法是通过配置Antd的rowSelection，设置自定义列选择框宽度columnWidth，确保固定列和非固定列的勾选框宽度相同。此外，还发现固定列会无视列宽不足，完整显示字段值，导致两表列长度不等引发遮挡。调整列宽以保持一致可以避免此问题。
需求：在原本表格基础上设置左右列为固定列。
现有情况：个别表格不带勾选框，个别表格带勾选框。
问题描述：前者直接给列加上fixed即可，后者加上fixed会出现可移动列被左侧固定列遮挡部分的情况。
给表格设置固定列后，实际上就从一个表变为了多个表。原始的表格为一个表，含有最初的所有列，左侧固定列为一个表，右侧固定列为一个表。检查元素发现，原始表格勾选框的宽度较左侧固定列表中的勾选框宽度更短，导致移动列向前缩进被左侧固定列在上方遮挡。
查阅官方文档，找到选择功能的配置rowSelection，其中自定义列表选择框宽度的参数为columnWidth，在项目代码中设置左侧固定表勾选框宽度同原始表勾选框宽度一致即可（可检查元素查看各表的勾选框宽度）。
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange
最低0.47元/天 解锁文章
扫一扫
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
