2023年6月20日发(作者：)

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; } } .-tooltip{ text-align: center; } }注：当前样式只针对Google浏览器，由于其他的浏览器的滚动条样式不⼀样或根本没有滚动条样式，所以不做赘述。如果要做Firefox或IE的兼容，则建议使⽤⽅案⼀这样样式更灵活，兼容性更好

2023年6月20日发(作者：)

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; } } .-tooltip{ text-align: center; } }注：当前样式只针对Google浏览器，由于其他的浏览器的滚动条样式不⼀样或根本没有滚动条样式，所以不做赘述。如果要做Firefox或IE的兼容，则建议使⽤⽅案⼀这样样式更灵活，兼容性更好