修改el-table滚动条&设置el-table行高&表格样式_el-table设置滚动条

1、滚动条

右侧滚动条设置

: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;
}

2、设置el-table行高

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

3、el-table  css改变样式

<template>
    <div class="dept-management approve-table"> 
        <el-table :data="list" style="width: 100%" header-cell-class-name="approve-thead" class="approval-table">  
            <el-table-column prop="name" label="姓名" align="center" header-align="center"> </el-table-column>
            <el-table-column prop="sex" label="性别" align="center" header-align="center"> </el-table-column>
     
        </el-table> 
    </div>
</template>

<style>
.approve-table {
    .approval-table {
        border: 1px solid #e5e5e5;
 
        &::before {
            height: 0;
        }
 
        &.el-table td {
            border: 0;
        }
 
        .approve-thead {
            border-bottom: 1px solid #e5e5e5;
            height: 45px;
            line-height: 43px;
            background: #f5f5f5;
            overflow: hidden;
            font-size: 13px;
            padding: 0;
            color: #333;
        }
 
        .el-table__body {
            border-collapse: collapse;
 
            tr+tr {
                border-top: 1px dashed #e5e5e5;
            }
        }
    }
 
    .approval-table .el-button {
        padding: 0
    }
 
    .approve-table-edit {
        color: #337ab7;
 
        &:hover {
            text-decoration: underline;
        }
    }
}
 
.approve-table-form {
    margin-top: 20px;
    padding-right: 30px;
}
</style>