antd表格固定列遮挡

在React项目中使用Ant Design表格时,遇到固定列遮挡可移动列的问题,特别是当列包含勾选框时。问题源于勾选框在不同表格中的宽度不一致。解决方法是通过配置Antd的rowSelection,设置自定义列选择框宽度columnWidth,确保固定列和非固定列的勾选框宽度相同。此外,还发现固定列会无视列宽不足,完整显示字段值,导致两表列长度不等引发遮挡。调整列宽以保持一致可以避免此问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:在原本表格基础上设置左右列为固定列。
现有情况:个别表格不带勾选框,个别表格带勾选框。
问题描述:前者直接给列加上fixed即可,后者加上fixed会出现可移动列被左侧固定列遮挡部分的情况。

给表格设置固定列后,实际上就从一个表变为了多个表。原始的表格为一个表,含有最初的所有列,左侧固定列为一个表,右侧固定列为一个表。检查元素发现,原始表格勾选框的宽度较左侧固定列表中的勾选框宽度更短,导致移动列向前缩进被左侧固定列在上方遮挡。

查阅官方文档,找到选择功能的配置rowSelection,其中自定义列表选择框宽度的参数为columnWidth,在项目代码中设置左侧固定表勾选框宽度同原始表勾选框宽度一致即可(可检查元素查看各表的勾选框宽度)。
在这里插入图片描述

const rowSelection = {
	selectedRowKeys: selectedRowKeys,
	onChange: this.onSelectChange,
	onSelect: this.handleSelectRow,
	onSelectAll: this.handleSelectAllRow,
	columnWidth:'60px',   // 设置勾选框宽度
}

新发现!(11.20)
实际产生该情况的原因是,比如该列字段值为ABCDE,但是因为列宽长度问题,在未设置固定列的情况下,该列字段显示不完整ABC…
然后将该列设置为固定列时,固定列会无视宽度不足(即列宽<字段值情况),强行完整显示该字段值。
于是乎两个表中的该列长度不等,则造成原本表格的其他列被固定列遮挡的情况(假设页面检查元素的固定的表为fixedTable,原本表为originTable,相同列为Full Name,列宽比较情况fixedTable>originTable)。

举例originTable如图页面检查,fixedTable则只含有设置为固定列的3列:Full Name、Age、Action。
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值