el-table表格样式修改

javascript 复制代码
<el-table
            :data="dateList"
            stripe
            max-height="95%"
            
            :header-cell-style="{
              background: '#004bff',
              color: '#fff',
              'font-size': '24px',
              height: '80px',
            }"
          ></el-table>
css 复制代码
::v-deep.el-table {
    background-color: transparent;
    border: 1px solid #3278ff;
    &.el-table::before {
      background-color: transparent;
    }
    .el-table__empty-text {
      color: #d2e6ff;
      font-size: 28px;
      line-height: 120px;
    }
    th.el-table__cell.is-leaf {
      border-bottom: none !important;
    }
    .el-table__row--striped {
      background-color: transparent;
    }
    .el-table__header tr,
    .el-table__header th {
      // background: #112c3c;
      padding: 5px 0;
    } //表头

    th,
    tr {
      background-color: transparent;

      .cell {
        color: #d2e6ff;
        background-color: transparent;
      }
    }
    .el-table__body-wrapper {
      .el-table__cell {
        border-bottom: 1px solid #3278ff !important;
      }
      th,
      tr {
        background-color: transparent;
        .cell {
          height: 56px;
          line-height: 56px;
          font-size: 24px;
          color: #d2e6ff;
          background-color: transparent;
        }
      }
    }
    /* 取消el-table鼠标移入高亮 */
    .el-table__body tr:hover > td {
      // background-color:#113176 !important;
      background-color: transparent !important;
    }
    .el-table__body tr.current-row > td {
      background-color: transparent !important;
      // background-color:#113176 !important;
    }
    .el-table__row--striped > td {
      background-color: rgba($color: #3278ff, $alpha: 0.15) !important;
    }
  }
相关推荐
cmd几秒前
别再用错!5种JS类型判断方法,从原理到实战一文吃透
前端·javascript
小江的记录本4 分钟前
【Redis】Redis常用命令速查表(完整版)
java·前端·数据库·redis·后端·spring·缓存
Csvn8 分钟前
状态管理方案对比(Context、Zustand、Jotai 选型指南)
前端
Irene19919 分钟前
JavaScript 事件循环(Event Loop) 的运作流程(附:queueMicrotask() 将一个回调函数立即排队到微任务队列中)
javascript·事件循环·宏任务·微任务·调用栈·queuemicrotask
snow_yan9 分钟前
基于 json-render 的流式表单渲染方案
前端·react.js·llm
倒计时的尽头是什么11 分钟前
避免渲染大量数据造成页面卡顿——虚拟滚动
vue.js
wobi_baoyan11 分钟前
【已解决】使用Maven打包发生或者启动Spring Boot项目发生 错误: 不支持发行版本 17
服务器·前端·javascript
Dylan~~~11 分钟前
Go语言Web框架选型指南:从入门到精通
开发语言·前端·golang
学以智用13 分钟前
# TypeScript 高级特性(核心+实用)
前端·javascript·typescript
学以智用14 分钟前
TypeScript 核心基础:类型/变量 + 函数 + 接口
前端·javascript·typescript