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;
    }
  }
相关推荐
哈__几秒前
ReactNative项目OpenHarmony三方库集成实战:react-native-chart-kit
javascript·react native·react.js
小同志002 分钟前
JQuery
前端·javascript·jquery
秋田君4 分钟前
【Vue实战】打造全能文件预览组件:支持PDF/Word/Excel/PPT/图片/音视频及Markdown(基于vue-office)
vue.js·文档预览·vue-office
就是个名称4 分钟前
Chrome使用cesium.js或者three.js报错不支持webGL
javascript·chrome·webgl
zdl6864 分钟前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
拾贰_C4 分钟前
【Vue | vue3 | spring boot】前端前台项目搭建
前端·vue.js·spring boot
Irene19914 分钟前
flush 是 Vue3 中控制副作用函数执行时机的配置选项,用于决定响应式数据变化后,副作用(watch、watchEffect、组件渲染)在何时执行
vue.js
用户90443816324605 分钟前
大三面字节被问懵?手撕 WebSocket 与 SSE 底层原理,大厂通关指南
前端·面试
蓝黑20208 分钟前
Vue SFC Playground
前端·javascript·vue.js
qq_406176149 分钟前
React与Vue异同点及优缺点深度解析
前端·vue.js·react.js