大屏el-table 背景颜色，滚动条和边框 css处理

最新推荐文章于 2024-05-23 19:16:52 发布

人间致远

最新推荐文章于 2024-05-23 19:16:52 发布

阅读量577

点赞数 7

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/zengdaoqiang/article/details/135692297

版权

/*  deep 穿透展現表格滾動條 */

::v-deep .el-table {
  // th高度
 th.el-table__cell div{
  height: 1.43vw;
  line-height: 1.43vw;
}
// td高度
 td.el-table__cell div{
  height: 1.2vw;
  line-height: 1.2vw;
}
// 卸载掉背景颜色
tbody tr:hover>td {
    background-color:unset !important //修改成自己想要的颜色即可
 }
 tr{
  background-color:rgba(#fff, 0);
}
  .el-table__cell {
    padding: 0.2vh !important;
  }
td.el-table__cell,th.el-table__cell.is-leaf {
    border: none;
  }

  .el-table__header-wrapper,
  th.el-table__cell {
    background-color: rgba(#fff, 0.04); // 表头背景色
    font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
    font-weight: bold;
    color: #ffffff;
    // opacity: 0.04;
  }
  .el-table__body-wrapper {
    height: 16vh;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      z-index: 11;
      // width: 6px;
      display: normal;
    }
    // &::-webkit-scrollbar-track,
    // &::-webkit-scrollbar-corner {
      // background: #fff;
      // background-color: #09203b;
    // }
    // &::-webkit-scrollbar-thumb {
      // border-radius: 5px;
      // width: 6px;
      // background: #b4bccc;
    // }
    // &::-webkit-scrollbar-track-piece {
      // background: #fff;
      // background-color: #0c2646;
      // width: 6px;
      // border: none; // 滚动条去边框
    // }
  }
}
// 表格背景色
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: none !important;
  background-color: rgba(#fff, 0.04) !important;
}
// 表格边框
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
// 表格底部边框
::v-deep .el-table::before {
  height: 0 !important;
}
// 表格头部边框
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
::v-deep .el-table__empty-block {
  background-color: rgba(#fff, 0.04) !important;
}