记录贴,对自己遇到的问题做一个记录,刚接触前端1个月,有不对的地方希望各位大佬指出。
项目场景:
因为用户需求,需要兼容谷歌、火狐、IE10的滚动条样式,el-table组件只兼容谷歌,火狐与IE显示默认样式,样式不统一。使用el-scrollbar进行滚动条样式统一。
问题描述:
部分源代码如下图所示:(注:el-table中,height属性放到style里,height没有生效,目前没有找到原因,所以放在外边)
<el-table style="width:100%" height="25vh">
<el-table-column>
...略
</el-table-column>
</el-table>
FireFox 和 IE 样式:
Google 样式:
添加el-scrollbar标签,el-scrollbar横向滚动条没有距离,el-table滚动条可以滑动且正常显示
例如:
<el-scrollbar style="height:28vh;width:1459px;">
<el-table style="width:100%">
<el-table-column>
...略
</el-table-column>
</el-table>
</el-scrollbar>
IE和FireFox样式:
Google (无横向滚动条):
原因分析:
el-scrollbar与el-table滚动条样式冲突,因为el-table标签自带滚动条,但是el-table生成滚动条样式不能兼容IE,所以需要使用el-scrollbar。
1.出现2个滚动条是因为没有隐藏其中一个滚动条。
2.el-scrollbar生成滚动条没有滚轮,横向滚轮没有定位到表格的横向距离。
解决方案:
1、因为IE和火狐在其他地方的滚动条都会显示横向滚动条,谷歌不会显示,在这里为了方便在全局添加了overflow-x: hidden;代码。
.el-scrollbar__wrap {
overflow-x: hidden;
}
2、样式显示为:
IE和FireFox:
Google :
3、通过F12定位查看边距,发现el-scrollbar无滑轮是因为没有定位到表格的宽度,尝试的在el-scrollbar和el-table之间加了一个div,设置了与表格相同的宽度,滑轮能正常出现,具体逻辑不太了解。
<el-scrollbar style="height:28vh;">
<div style="width:2520px;">
<el-table style="width:100%">
...略
</el-table>
</div>
</el-scrollbar>
火狐、谷歌、IE样式: