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;
    }
  }
相关推荐
fruge1 小时前
Vue项目中的Electron桌面应用开发实践指南
前端·vue.js·electron
漂流瓶jz7 小时前
Webpack中各种devtool配置的含义与SourceMap生成逻辑
前端·javascript·webpack
这是个栗子7 小时前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
前端架构师-老李7 小时前
React 中 useCallback 的基本使用和原理解析
前端·react.js·前端框架
木易 士心8 小时前
CSS 中 `data-status` 的使用详解
前端·css
明月与玄武8 小时前
前端缓存战争:回车与刷新按钮的终极对决!
前端·缓存·回车 vs 点击刷新
花姐夫Jun8 小时前
基于Vue+Python+Orange Pi Zero3的完整视频监控方案
vue.js·python·音视频
牧马少女8 小时前
css 画一个圆角渐变色边框
前端·css
zy happy8 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
小雨青年9 小时前
Cursor 项目实战:AI播客策划助手(二)—— 多轮交互打磨播客文案的技术实现与实践
前端·人工智能·状态模式·交互