需求:在原本表格基础上设置左右列为固定列。
现有情况:个别表格不带勾选框,个别表格带勾选框。
问题描述:前者直接给列加上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。