ElementUITable组件固定列及滚动条样式异常
序⾔ 
在使⽤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. 感谢同事的帮助
element表格横向滚动条
2. 使⽤UI框架时样式代码⽤<style scoped>，或者给元素⾃定义class然后再在⾃定义的class中去改。
3. UI框架常⽤组件出现异常显⽰，考虑样式污染。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。