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>