【前端|Element-UI（el-table样式修改）】以下样式代码在less环境下生效，最终样式如下。
文章图片
样式代码，
/*修改table 表体的背景颜色和文字颜色*/
/deep/ .el-table {
background-color: transparent;
th,
td {
background-color: transparent;
}
.el-table__expanded-cell {
background-color: transparent !important;
}// 表头背景色
th.el-table__cell {
background-color: rgb(25, 50, 70);
color: #fff;
}
tr > td {
background-color: rgb(25, 50, 70);
color: #fff;
}// hover效果
tr:hover > td {
background-color: rgba(0, 0, 0, 0) !important;
}tbody tr:hover > td {
background-color: #1356a1 !important;
// text-align: center;
}// 滚动条宽高
.el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
height: 5px;
}.el-table__body-wrapper::-webkit-scrollbar {
width: 5px;
/*滚动条宽度*/
height: 10px;
/*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
.el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px #216fe6 inset;
/*滚动条的背景区域的内阴影*/
border-radius: 10px;
}/*定义滑块 内阴影+圆角*/
.el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px #216fe6 inset;
border-radius: 6px;
background-color: #216fe6;
}
}
推荐阅读
- 前端|Promise实现
- Vue.js|Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin
- react-redux|「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）
- 前端自动化打包实践
- echarts|vue-charts的使用（在vue项目中使用echarts）
- javascript|vue 移动端断网后处理
- Vue实现路由懒加载的方式以及打包问题
- 前端|vue数据渲染
- 小程序|实战教程｜数据校验 - 步入高阶开发的必修课