antd3.x版本table使用fixed错位问题修复

最新推荐文章于 2024-09-11 15:13:35 发布

原创最新推荐文章于 2024-09-11 15:13:35 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

那些年我们遇到的坑专栏收录该内容

12 篇文章

订阅专栏

这篇博客主要讨论了一个关于前端开发中遇到的表格组件问题。作者指出，在使用Ant Design的表格组件时，固定列的高度没有自适应子表格的高度，导致显示错位。为了解决这个问题，作者通过获取子表格的高度并应用到固定列的相应元素上，实现了高度自适应，并通过设置定位和z-index来避免重叠。提供的修复代码涉及DOM操作和定时器的使用，确保了在子表格展开后能正确调整固定列的高度。

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

问题如图：
在这里插入图片描述
修复后如下：

解决思路：
fixed栏位高度没有自适应（即和子表格高度一致），通过获取元素ant-table-expanded-row，拿到子表格的高度（盒子a），且子表格在fixed栏位也插入了以ant-table-expanded-row命名的盒子（(盒子b)高度固定，导致错位）。通过观察，将a盒子的高度给b盒子，且设置定位，可以修复

 expandedRowsChange = () =>{
    setTimeout(()=>{
      const d = document.getElementsByClassName('ant-table-expanded-row')
      try{
        const l = d.length
        for(let i=0;i<l/2;i++){
          d[(l/2)+i].style.height = `${d[i].clientHeight}px`
          d[i].style.position = 'relative'
          d[i].style.zIndex = 900
        }
      }catch(error){
        console.log('error :>> ', error);
      }
    })
  }