修改默认滚动条样式

父组件嵌套子组件，可以直接在父组件设置滚动条样式

复制代码

// 设置该大屏页面滚动条
// .safety-container 为父组件的类名
/* 滚动条宽度 */
.safety-container ::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
}
/* 滚动条轨道背景 */
.safety-container ::-webkit-scrollbar-track {
  background: rgba(96,255,242,0.2);
  border-radius: 5px;
}
/* 滚动条滑块颜色 */
.safety-container ::-webkit-scrollbar-thumb {
  background: rgba(96,255,242,0.6);
  border-radius: 5px;
}
/* 滚动条滑块悬停颜色 */
.safety-container ::-webkit-scrollbar-thumb:hover {
  background: rgba(96,255,242,0.4);
}

/* Firefox 兼容 */
.safety-container {
  // scrollbar-width: thin;
  // scrollbar-color: rgba(96,255,242,0.6) rgba(96,255,242,0.2);  /* Firefox: 滑块颜色 轨道颜色 */
}

/* 确保所有子组件都继承滚动条样式 */
.safety-container * {
  // scrollbar-width: thin;
  // scrollbar-color: rgba(96,255,242,0.6) rgba(96,255,242,0.2);
}

如果需要单独修改el-table的滚动条样式

复制代码

/* 纵向滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgba(96,255,242,0.2); /* 滚动条轨道背景 */
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: rgba(96,255,242,0.6); /* 滚动条滑块颜色 */
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(96,255,242,0.4); /* 滚动条滑块悬停颜色 */
}

/* 横向滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar:horizontal {
  height: 8px; /* 横向滚动条高度 */
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track:horizontal {
  background: rgba(96,255,242,0.2);
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:horizontal {
  background: rgba(96,255,242,0.6);
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:horizontal:hover {
  background: rgba(96,255,242,0.4);
}

但是表格右侧还留有一点白色区域（如上图所示），这时，我们可以进行隐藏，如下图所示

复制代码

::v-deep .el-table .el-table__cell.gutter{
  display: none;
}

但如果只是单纯的想隐藏滚动条，可通过下列代码实现

复制代码

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
}