修改el-table滚动条&设置el-table行高

右侧滚动条设置

:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell):hover {
    color: #e62d28;
    background-color: #f0f0f0;
}
::v-deep .el-table--small th, .el-table--small td {
    padding:0px 0px 0px 0px;
    height:40px;
}

下方滚动条设置

// 滚动条样式
// 胶囊背景色
::v-deep .el-table__body-wrapper::-webkit-srollbar-track {
    background-color: rgba(255, 255, 255, 0);
}
//可设置胶囊宽高
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    height: 12px;
    width: 10px;
    opacity: 0.5;
}
// 设置胶囊色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #cdd9e6;
}

全局


//滚动条的宽度
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #ffffff00;
    border-radius: 6px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb { 
    background-color: #cdd9e6;
    border-radius: 6px;
}

::-webkit-srollbar-track {
    background-color: rgba(255, 255, 255, 0);
}
::-webkit-scrollbar {
    height: 12px;
    width: 10px;
    opacity: 0.5;
}
::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #cdd9e6;
}

设置el-table行高

::v-deep .el-table--small th, .el-table--small td {
    padding:0px 0px 0px 0px;
    height:30px;
}

你可能感兴趣的:(vue.js,javascript,前端)