element ui 的Table表单组件 固定表头时错位-修改滚动条宽高导致样式问题

461 阅读1分钟

image.png

滚动条从默认的20px改成10px,出现错位

可以直接设置

::v-deep .el-table__fixed {

    height: 100px !important;

    bottom: 5px; // 横向滚动条高度

  }

源码找到node_modules\element-ui\packages\table\src

const tableHeight = this.tableHeight = this.table.$el.clientHeight;

应该是 修改某个属性计算得到的height, 先标记一下 回头再找


如果是竖向滚动

 .el-table__body-wrapper::-webkit-scrollbar {
   width: 20px; 
   height: 20px; 
 }
 .el-scrollbar__wrap::-webkit-scrollbar {
   width: 20px; 
   height: 20px; 
 }
————————————————
版权声明:本文为CSDN博主「⁠⁡你我山巅自相逢」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_33767912/article/details/122885247

table滚动条样式

.el-table {  
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {  
// width: 10px; /*滚动条宽度*/  
// height: 10px; /*滚动条高度*/  
// }  
/*定义滚动条轨道 内阴影+圆角*/  
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {  
box-shadow: 0px 0px 0px #071e4a inset; /*滚动条的背景区域的内阴影*/  
border-radius: 10px; /*滚动条的背景区域的圆角*/  
background-color: rgba(0, 0, 0, 0); /*滚动条的背景颜色*/  
}  
/*定义滑块 内阴影+圆角*/  
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {  
// box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/  
// border-radius: 10px; /*滚动条的圆角*/  
// background-color: #00a0e9; /*滚动条的背景颜色*/  
// }  
}