星五博客

el-table样式修改

这里演示了一套深蓝配色的例子:

注意,在scoped里时需要穿透一下,也就是用::deep{}包起

<style>

.el-table {

  width: 100%;

  background: #435b89;

  border-color: #6e7a98;

}

.el-table .el-button {

  margin-left: -2px;

  margin-right: 5px;

  font-size: 13px;

}

/* 表头 */

.el-table th.el-table__cell {

  background: #062b6a;

  color: #fff;

  border-color: #6e7a98;

  padding: 0;

}

/* 行 */

.el-table .el-table__row {

  background: #435b89;

  color: #fff;

}

/* 选中行颜色,需要开启 highlight-current-row */

      .el-table__body tr.current-row > td.el-table__cell {

        background-color: #202a33;

     }

/* 当前行 鼠标悬浮 */

  .el-table__body tr.hover-row > td.el-table__cell {

    background: #062b6a;

    border-color: #6e7a98;

  }

  /* 当前行 鼠标悬浮 */

  .el-table--enable-row-hover .el-table__body tr:hover > td {

    background: #0b61e1;

    border-color: #6e7a98;

  }

/* 坚间隔线 */

.el-table--border .el-table__cell {

  border-right: 1px solid #6e7a98;

  padding: 0;

}

/* 横间隔线 */

.el-table td.el-table__cell,

.el-table th.el-table__cell.is-leaf {

  border-bottom: 1px solid #6e7a98;

  padding: 0;

}

/* 边框 */

.el-table--border::after, .el-table--group::after, .el-table::before,

.el-table__fixed-right::before, .el-table__fixed::before {

    background-color: #6e7a98;

}

/* 滚动条 */

*::-webkit-scrollbar {

  background: transparent;

}

*::-webkit-scrollbar-track {

  background: #435b89;

}

*::-webkit-scrollbar-thumb {

  background-color: #409eff;

  border-radius: 6px;

}

/* 分页 */

.el-pagination {

  background: #435b89;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin-top: 10px;

}

.el-pagination__total,

.el-pagination__jump {

  color: #fff;

}

</style>

效果:



Vue