当前位置:   article > 正文

ElementUI中遇到的问题_el-table 滚动条太小

el-table 滚动条太小

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

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

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

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

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

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

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

  1. <el-form-item style="margin-left: 10px;box-sizing: border-box;padding: 0 10px;">
  2. <el-row :gutter="10">
  3. <el-col :span="4">
  4. <div></div>
  5. </el-col>
  6. <el-col :span="11">
  7. <div></div>
  8. </el-col>
  9. <el-col :span="4">
  10. <div></div>
  11. </el-col>
  12. </el-row>
  13. </el-form-item>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/850904
推荐阅读
相关标签
  

闽ICP备14008679号