ElementUI中遇到的问题

1、解决在MAC系统中ElementUI中的el-table标签中的滚动条太小的问题

解决方案：在CSS样式中输入如下样式

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 17px; /*滚动条宽度*/
  height: 17px; /*滚动条高度*/
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  /*border-radius: 0px; !*滚动条的背景区域的圆角*!*/
  /*background-color: white; !*滚动条的背景颜色*!*/
  color: transparent; /*滚动条的背景设置为透明*/
}
/*/deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {*/
/*  background-color: rgba(2,29,87,1);*/
/*}*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  /*background-color: rgba(24,144,255,0.50); !*滚动条的背景颜色*!*/
  background-color: #999999; /*滚动条的背景颜色*/
}

2、解决打开el-drawer标签时，自动选中标题时的边框

/*去掉打开抽屉时自动选中标题时的蓝色边框*/
/deep/ :focus {
  outline: 0;
}

3、使用el-row使用非零 gutter 时宽度溢出出现水平滚动条

解决方案：在父容器中添加样式box-sizing: border-box;padding: 0 10px;，需要给父级容器留出足够的padding，注意父级容器的box-sizing属性设置为border-box，确保 padding 属性生效

<el-form-item style="margin-left: 10px;box-sizing: border-box;padding: 0 10px;">
   <el-row :gutter="10">
       <el-col :span="4">
           <div></div>
       </el-col>

        <el-col :span="11">
            <div></div>
        </el-col>

        <el-col :span="4">
            <div></div>
        </el-col>
           
    </el-row>
</el-form-item>