el-table表格做滚动条样式处理
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:calc(100% - 35px);
.el-table__body-wrapper{
overflow: auto;
height:calc(100% - 85px);
&::-webkit-scrollbar{
width: 0px;/* 纵向滚动条宽度 */
height: 8px;/* 横向滚动条⾼度 */
// display: none;
}
:
:-webkit-scrollbar-button{
width: 10px;/* 横向滚动条宽度 */
height: 0px;/* 纵向滚动条⾼度 */
border-radius: 10px;
}
/* Track */
&::-webkit-scrollbar-track{
background:rgba(0, 0, 0, 0.2);
border-radius: 8px;
width: 8px;
}
/
* Handle */
&::-webkit-scrollbar-thumb{
background:rgba(113,147,214,1);
border-radius: 8px;
}
}
.cell.el-tooltip{
text-align: center;
html横向滚动条样式
}
}
注：当前样式只针对Google浏览器，由于其他的浏览器的滚动条样式不⼀样或根本没有滚动条样式，所以不做赘述。如果要做Firefox或IE的兼容，则建议使⽤⽅案⼀这样样式更灵活，兼容性更好

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