vue项目中引入Element-UI并对其el-table表格做滚动条样式处理
需求分析:
主要是对table表格中的body内容做滚动处理,表头样式不做变化。初调时X轴和Y轴都做了overflow:auto滚动设置。结果当X轴右滑动后会出现表头和表格内容对不齐的问题。经测试发现是Y轴滚动条宽度占用了表格内容的宽度。所以问题的核心还是如何使XY轴滚动且X轴显示滚动条,而Y轴隐藏滚动条。
调试过程方法测试
方案一:利用父级标签隐藏子级滚动条的思路:由于针对el-table标签中的body做处理,如果在再外层追加父级标签。不仅增加了代码的难度而且容易破坏Element-UI定义的标签结构。可能会引起其他意外的异常。故排除此方法
方案二: 利用overflow-y:hidden设置Y轴滚动条隐藏导致滚动条无法滚动也不符合需求
方案三: 在调试过程中查找了一下,在Google浏览器中可以单独设置XY轴的宽度和高度,自此思路就是XY轴均设置overflow:auto,但可以把X轴有高度,而Y轴的宽度设置为0。则可以实现“隐藏”Y轴宽度的需求
样式代码
.el-table{
height: