element-ui table设置列fixed时滚动条无效的解决方法

在使用element-ui的table组件时,给前面某些列设置了fixed属性,不随着滚动条滚动移动,结果发现设置后,拖动横向的滚动条的前半部分无法拖动。
后来发现原因是设置了fixed属性的列把滚动条覆盖;
搜索后有朋友给出的解决方法是这样的:

.el-table__fixed {
    height:auto !important; // 让固定列的高自适应,且设置!important覆盖ele-ui的默认样式
    bottom:17px; // 固定列默认设置了定位,    position: absolute;top: 0;left: 0;只需要再设置一下bottom的值,让固定列和父元素的底部出现距离即可
}

滚动条覆盖的情况是解决了,但是会出现这样的情况:

image.png

最终解决方法:

.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容