首页 技术设计 前端 vue elementui

# sass

/* 修改滚动条的宽度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; /* 对于水平滚动条 */
  height: 6px; /* 对于垂直滚动条 */
}
 
/* 修改滚动条滑块的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条滑块圆角 */
}
 
/* 修改滚动条轨道的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* 滚动条轨道颜色 */
}
 
/* 修改滚动条的样式，适用于 Firefox */
::v-deep .el-table__body-wrapper {
  scrollbar-width: thin; /* 设置滚动条宽度 */
  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1); /* 滑块颜色 轨道颜色 */
}

# less

/deep/ .el-table__body-wrapper {
    // 滚动条样式修改
    /* 滚动条轨道区域样式 */
    &::-webkit-scrollbar {
        width: 8px; /* 设置滚动条宽度为 8 像素 */
        background-color: transparent;
    }
    /* 滑块样式 */
    &::-webkit-scrollbar-thumb {
        background-color: #b8b8b8; /* 设置滑块颜色为深灰色 */
        border-radius: 4px; /* 设置滑块边角半径为 4 像素 */
    }
    /* 滚动条轨道内部空白区域样式 */
    &::-webkit-scrollbar-track {
        background-color: #f0f0f0; /* 设置轨道背景色为浅灰色 */
    }
    /* 滚动条两端按钮样式 */
    &::-webkit-scrollbar-button {
        display: none; /* 不显示按钮 */
    }
    /* 交叉点处的区域样式 */
    &::-webkit-scrollbar-corner {
        background-color: transparent; /* 设置交叉点处的背景色为透明 */
    }
    /* 调整大小手柄样式 */
    &::-webkit-resizer {
        display: none; /* 不显示调整大小手柄 */
    }
}
/deep/ .el-table th.gutter {
    // display: none !important;
    width: 8px !important;
}
/deep/ .el-table colgroup col[name="gutter"] {
    display: none;
    width: 8px;
}
/deep/ .el-table__body {
    width: 100% !important;
}