修改el-table样式

Koreyoshi·

已于 2022-08-04 11:13:51 修改

阅读量750

点赞数

分类专栏： elementUI 文章标签： vue.js elementui javascript

于 2022-07-21 17:45:45 首次发布

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/125917614

版权

elementUI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<style scoped>
/* table背景色，内容奇数行颜色 */
::v-deep .el-table,
::v-deep .el-table tr {
  background: #062B57;
}
/* 表头最后一格,滚动条上面的那一格 */
::v-deep .el-table--border th.el-table__cell.gutter:last-of-type{
  border-bottom: 1px solid rgba(8, 109, 160, 0.2);
  border-bottom-width: 1px;
}
/* 最外层上边和左边的边框色   直接设置border的话，右边会有2px的边框视觉 */
::v-deep .el-table--border,
::v-deep .el-table--group{
  border-top: 1px solid rgba(6, 106, 155, 0.1);
  border-left: 1px solid rgba(6, 106, 155, 0.1);
}
/* 背景色修改之后的效果是边框色 最外边右边和底边的边框色 */	
::v-deep .el-table--border::after,::v-deep .el-table--group::after,::v-deep .el-table::before {
  background-color: rgba(6, 106, 155,0.1);
}
/* 所有的小格子边框颜色 */
::v-deep .el-table th.el-table__cell,
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell.is-leaf{
  border: 1px solid rgba(6, 106, 155, 0.1);
}
/* 字体颜色 */
::v-deep .el-table,::v-deep .el-table thead {
  color: #fff;
}
/* 表头颜色和边框色 */
::v-deep .el-table thead.is-group th.el-table__cell {
  background: rgba(6, 106, 155, 0.7);
  border: 1px solid rgba(6, 106, 155, 0.2);
}
/* 暂无数据占位字颜色 */
::v-deep .el-table__empty-text {
  color: rgba(255,255,255,0.6);
}
/* 内容偶数行背景色 */
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
  background: rgba(20,60,108, 0.5);
}
/* hover高亮背景色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background-color: #143C6C;
}
</style>