Published on
632

Antd Table固定列阴影不显示问题

Authors
  • avatar
    Name
    小辉辉
    Twitter

前言

用antd组件库带来的好处不言而喻,但是随着业务用法的复杂度提升,有时候还是会遇到使用组件库带来的一些奇奇怪怪的问题,这次的antd table固定列不显示就是其中一个。

之前也没有留意这个功能是不是正常的,突然有一题测试提上了这么一个bug,哎,仔细一看,还真的不合理啊,右侧的操作固定列在出现横向滚动条时,明显发现固定列的左侧没有边框,只有横向移动到最右侧时才会在左侧出现滚动条。

但是我们去看下antd官网的demo就发现实际效果可不是这样的,在出现横向滚动条固定列的左侧会有很明显一处阴影效果的,当拖到最右侧时,阴影效果才会消失。

原因排查

这个现象给我的第一反应是,会不会我们用antd表格的用法不对导致的,粗粗看看了下配置项,没有发现什么不一致的地方,到这里只能看下这个阴影是怎么实现的了。

大致一看我们就会发现这个阴影是加在固定列td的:after伪元素上面的,这个元素上有两个效果,一个是边框border,另外一个是box-shadow属性,两者共同配合作出了了阴影的效果。

至于定位在最固定列最左侧,这个效果是依赖于绝对定位和transform偏移效果来实现的。

看到这里,在来看看这个不显示的问题,通过样式调试,我发现这个阴影的效果是存在于这个td上面的,但是为什么就是不显示呢?通过调整transform属性,就发现当值在td内部时,阴影就能显示,在固定列td的外部时就消失了,联想到这里,马上去看td这一层是否有溢出隐藏的样式属性,果然就发现有一个overflow: hidden的样式,去掉该样式后,固定列的阴影就正常显示了。

说到这里,我们发现大部分情况下antd的组件库还是很靠谱的,在遇到异常情况时,可以先尝试了解下本身atnd组件的实现方式,再回过头来看看是否因为我们项目的某些因素导致了功能问题。