element - table 表格样式覆盖

• 修改的表格样式有：斑马线、滚动条、滚动区域、字体颜色、底部白线、表格暂无数据背景

<template>
  <el-table
   :data="tableData"
    style="width: 100%"
    height="calc(100% - 0px)"
    //设置表格头部样式
   :header-cell-style="{
    color: '#fff',
    background: '#074252',
    fontWeight: 'normal',
    height: '44px',
    }"
   :row-class-name="tableRowClassName"
                >
</template>
// 设置表格斑马线
methods：{
 // 设置表格斑马线
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "table-item-1";
      } else {
        return "table-item-2";
      }
    },
}

// 表格斑马线-----
  ::v-deep .el-table__row.table-item-1 {
    background: #11697b;
  }
  ::v-deep .el-table__row.table-item-2 {
    background: #094152;
  }
  // -----

  // 表格滚动条 ---
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 0;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  // ---

  // 滚动区域 -----
  / 滚动区域 -----
  /*里面的代码可以根据自己需求去进行更改*/
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 10px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2cebfe;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    background: #2cebfe;
  }

  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }

  // ::v-deep .el-table__body-wrapper {
  //   &::-webkit-scrollbar {
  //     width: 0;
  //     background: rgba(213, 215, 220, 0.3);
  //     border: none;
  //   }
  //   &::-webkit-scrollbar-track {
  //     border: none;
  //   }
  // }
  // ::v-deep .el-table th.gutter {
  //   display: none;
  //   width: 0;
  // }
  // ::v-deep .el-table colgroup col[name="gutter"] {
  //   display: none;
  //   width: 0;
  // }
  // ::v-deep .el-table__body {
  //   width: 100% !important;
  // }
  // -----
  // -----

  ::v-deep.el-table th.el-table__cell.is-leaf,
  ::v-deep.el-table td.el-table__cell {
    border: none;
  }

  // 修改 字体颜色
  ::v-deep .cell {
    color: white;
  }

  // 表格 hover 样式修改
  ::v-deep .el-table__body tr.hover-row > td.el-table__cell,
  .el-table__body tr.hover-row.current-row > td.el-table__cell,
  .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
  .el-table__body
    tr.hover-row.el-table__row--striped.current-row
    > td.el-table__cell {
    background: transparent;
  }

  // 表格底部 白线 --
  ::v-deep .el-table::before,
  .el-table--group::after,
  .el-table--border::after {
    background-color: transparent;
  }
  ::v-deep .el-table__fixed::before,
  .el-table__fixed-right::before {
    background-color: transparent;
  }
  // --

  // 表格暂无数据 背景 ----
  ::v-deep .el-table {
    background-color: transparent;
  }
  // ----