elementui表格样式自定义

dantenou

已于 2023-07-14 11:56:50 修改

阅读量281

点赞数

文章标签： vue.js webpack css3 scss

于 2023-07-11 18:40:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39540108/article/details/131666674

版权

该代码段展示了如何使用/deep/选择器和CSS来定制ElementUI的表格组件，包括去除表格边框、设置表头和内容的背景色、修改条纹行样式、消除间隙中的白色以及实现表格行hover时的高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//保证表格边框白线消失
  /deep/ .el-table {
    color: #ecffff;
    background: transparent; //使得表格边框白线消失
  }

  /*表头样式设置*/
  /deep/ .el-table thead tr th {
    background: #064b51;
    color: #00f5ff;
  }

  /*表格内容设置*/
  /deep/ .el-table th,
  /deep/ .el-table tr {
    background: #011b17;
  }

// 条纹行样式修改
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #011b17;
  }

  /*移除表格间隙中露出的白色*/
  /deep/ .el-table tbody td,
  /deep/ .el-table tbody th.is-leaf,
  /deep/ .el-table td,
  /deep/ .el-table th.is-leaf {
    border: none;
  }

  /deep/ .el-table::before {
    height: 0; //使得表格底部边框白线消失
  }
//表格选中行设置
  /deep/ .el-table {
    tbody tr {
      &:hover {
        td {
          background: #ff904a !important;
        }
      }
    }
  }