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框架常用组件出现异常显示，考虑样式污染。