element-plus中el-table固定列fixed失效问题

问题描述

场景:表格在子组件中，同时该子组件在父组件中引用。

表格具有合并表头的操作，同时对第一列“姓名列”进行了"fixed“固定列的操作，不起效。最初怀疑是合并表头行操作的影响，但经排查，发现是父组件中一句代码的问题。

bug效果演示

能看到，第一列根本没有被锁定住。

错误原因

父组件中，下面这行代码影响到了子组件中表格的fixed效果。

/* 这一句样式会让子组件中表格列的fixed属性失效，需要注意!! */
::v-deep .el-scrollbar__view {
    overflow-y: hidden !important;
}

此时，把这句代码注释掉，效果如下:

可以看到，这里已经成功被固定住了。

思路历程

我在排查这个问题的过程中，先去element-plus的官网查找了对应的issues，10096 issues, 在这个问题中，他们提到了一个demo,说是解决了这个问题，demo代码, 但在我把这个demo代码复制到我自己的项目中（就是出问题的这个组件），发现本该生效的代码并没有生效。于是我就想：“也许子组件根本没出问题，问题在父组件上”，在缩小范围后，接下来的操作就非常简单了，一步步缩小范围，最后找到了原因。

注

开发之路，果然奇妙。这个问题其实卡了我一个上午接近3个小时，但最后的原因却是这么简单。
希望本文能对您所有帮助，感谢阅读。