Element UI Table组件固定列及滚动条样式异常

序言  

在使用Elemet UI时,常用的el-table组件的固定列显示不正常:

a.固定列最后一行显示不正常,最后一行横向只显示一部分。

b.用横向滚动条滚动表格时,固定列跟着一起滚动。

解决方法

a.解决问题a时百度挺管用,很多人都遇到这个问题,于是按照别人的答案,修改固定列的高度。

.el-table__fixed{

  height:100% !important;

}

.el-table__fixed-right{

  height:100% !important;

}

加上之后就解决了,固定列最后一行显示不完整的问题;

b. 解决b问题时,百度后发现居然没有人遇到我这种问题;

  1.将自己定义的所有样式全都去除,只留固定列的设置,仍然显示不正常。

  2.浏览器调试模式观察生成的html代码中样式和官网对比,仍然找不到问题所在(但是应该是有差别的,我当时没有找到)

  3.请教了好几位同事,在和其中一位同事重现我的问题时,用他的页面中的el-table组件进行重现。

第一次打开用他的页面,滚动条能正常显示并且滚动。接下来看我的页面却不行,奇怪的是,切回去看他的页面显示也不正常了。

于是他猜想是样式污染导致的。果不其然,全局搜索发现,在其他的vue组件中有如下样式。

  .el-table--scrollable-x .el-table__body-wraper{

    overflow:visible;

  }

   .el-table__body-wraper{

    overflow:visible;

  }

这个样式正式固定列的样式,并且这个样式没有写在任何class的内部,直接污染了整个项目的所有用到固定列的el-table组件。

最后删掉这些样式问题解决。

总结:

1. 感谢同事的帮助

2. 使用UI框架时样式代码用<style scoped>,或者给元素自定义class然后再在自定义的class中去改。

3. UI框架常用组件出现异常显示,考虑样式污染。

原文地址:https://www.cnblogs.com/chaojizhengui/p/ElTable_fixed.html