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

前言

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

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

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

原因排查

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

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

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

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

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