element table

星辰啊大海7857

于 2020-05-09 15:22:01 发布

阅读量240

点赞数

分类专栏： vue-element-admin开发

本文链接：https://blog.csdn.net/weixin_39107711/article/details/106019973

版权

vue-element-admin开发专栏收录该内容

35 篇文章 24 订阅

订阅专栏

<el-table
   ref="multipleTable"
   :data="tableData.obj"
   :header-cell-class-name="tableHeaaderCellClassName"
   :header-row-class-name="tableHeaderRowClassName"
   :row-class-name="tableRowClassName"
>
... ...

methods

tableRowClassName() {
      return 'dark-row'
},
tableHeaderRowClassName() {
      return 'dark-header-row'
},
tableHeaaderCellClassName() {
      return 'dark-header-cell'
}

.darkTheme {
  /deep/ .dark-el-tabs {
    background: rgba(13, 24, 48, 0.95);
    border: none;
    box-shadow: none;
    .el-tabs__header {
      background-color: transparent;
      border-bottom: none;
    }
    /deep/.el-table {
      .dark-row, .dark-header-cell {
        background-color: rgba(13, 24, 48, 0.95);
      }
      tr:hover > td {
        background-color: rgba(13, 24, 48, 0.95) !important;
      }
      .el-loading-mask {
        position: absolute;
        z-index: 2000;
        background-color: rgba(11, 7, 45, 0.9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
      }
    }
  }
}