若依-vue样式table调整通用

table表头

<el-table
             v-loading="loading"
             :data="browseList"
             @selection-change="handleSelectionChange"
             height="650"
             max-height="800"

             border
             highlight-current-row
             :header-cell-style="{background:'#000000'}"
             :row-style="{height:1+'px'}"
             :cell-style="{padding:'0px'}"
    >

style样式

<style lang="scss" scoped>
  /* 全局样式表 */
  /* elementui中table超出隐藏提示框宽度 */
  .el-tooltip__popper {
    max-width: 200px;
  }

  //设置表头文字样式
  ::v-deep .el-table__header-wrapper {
    thead {
      th{
        div{
          font-weight: 100;
          font-size: 20px;
        }
      }
    }
  }

  //表格内容区域隔行换色表格内容颜色
  ::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: rgb(172, 204, 203);
  }
  ::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: rgb(255, 230, 192);
  }
  //表格tr间距
  ::v-deep .el-table__body {
    border-collapse: separate !important;
    border-spacing: 0 1px !important;
    table-layout: auto !important;
  }
  ::v-deep .el-table,.el-table__expanded-cell {
    background-color: transparent !important;
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
    background-color: transparent;
  }

  //图片样式
  .el-table::before{
    background-color: transparent;
  }
  ::v-deep .el-table__header tr,
  ::v-deep .el-table th, .el-table tr{
    background-color:transparent;
  }

  //表头颜色字体控制
  ::v-deep .el-table th>.cell{
    font-weight: 700;
    color: #f3f2fa;
    font-size: 19px;
  }
  //指定第列颜色
  ::v-deep .el-table tbody tr td div{
  color: #ffb1c2;
  }
  //指定第某列颜色
 /* ::v-deep .el-table tbody tr td:nth-child(-n+3) div{
    color: #0dd121;
  }*/
  ::v-deep .el-table tbody tr td div{
    font-size: 15px;
  }
  //上下的间距
  ::v-deep .el-table__body {
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    table-layout: auto !important;
    tbody tr:nth-child(odd) {
      background-color: #282827;
    }
    tbody tr:nth-child(even) td {
      background-color: #3e3e3e;
    }
  }
  ::v-deep .el-table,.el-table__expanded-cell {
    background-color: transparent !important;
  }
  ::v-deep .el-table--enable-row-transition .el-table__body td,.el-table .cell {
    background-color: transparent;
  }

  //绑定选中行的颜色变化
  ::v-deep .el-table__body tr.current-row>td {
    color: #a457d1;
    background: #f3f2fa !important;
  }


  //修改bug的样式
  ::v-deep .el-table__header tr,
  ::v-deep .el-table th, .el-table tr{
    background-color:transparent;
  }


</style>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值