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;
      }
  }

注：当前样式只针对Google浏览器，由于其他的浏览器的滚动条样式不一样或根本没有滚动条样式，所以不做赘述。如果要做Firefox或IE的兼容，则建议使用方案一这样样式更灵活，兼容性更好