element表格横向滚动条被固定表头遮挡

282 阅读1分钟
//自定义table滚动条代码

::-webkit-scrollbar {
  width: 6px;
  height: 12px;
  background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(75, 75, 75, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(75, 75, 75, 0.3);
  background-color: #ccc;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(75, 75, 75, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}

如果表头或标尾列表是固定列的话,会导致滚动条被固定列遮挡,如下图

image.png

解决之法

//加上此代码
//如果只有表头固定写el-table__fixed就行,如果头尾都有固定则需加上el-table__fixed-right

.el-table__fixed,
.el-table__fixed-right {
  height: auto !important;
  bottom: 12px !important;
}

注意:

bottom: 12px !important; bottom里的高度值要与定义的滚动条高度一致