问题描述
场景:表格在子组件中,同时该子组件在父组件中引用。
表格具有合并表头的操作,同时对第一列“姓名列”进行了"fixed“固定列的操作,不起效。最初怀疑是合并表头行操作的影响,但经排查,发现是父组件中一句代码的问题。
bug效果演示
能看到,第一列根本没有被锁定住。
错误原因
父组件中,下面这行代码影响到了子组件中表格的fixed效果。
/* 这一句样式会让子组件中表格列的fixed属性失效,需要注意!! */
::v-deep .el-scrollbar__view {overflow-y: hidden !important;
}
此时,把这句代码注释掉,效果如下:
可以看到,这里已经成功被固定住了。
思路历程
我在排查这个问题的过程中,先去element-plus的官网查找了对应的issues,10096 issues, 在这个问题中,他们提到了一个demo,说是解决了这个问题,demo代码, 但在我把这个demo代码复制到我自己的项目中(就是出问题的这个组件),发现本该生效的代码并没有生效。于是我就想:“也许子组件根本没出问题,问题在父组件上”,在缩小范围后,接下来的操作就非常简单了,一步步缩小范围,最后找到了原因。
注
开发之路,果然奇妙。这个问题其实卡了我一个上午接近3个小时,但最后的原因却是这么简单。
希望本文能对您所有帮助,感谢阅读。