数据可视化大屏 项目开发中，需要实现表格效果，这里我们使用的是vue3 element-plus el-table，我们通过css来进行二次调整实现我们想要的自定义样式效果。

组件代码

<div class="tableListInner">
      <el-table :data="list" style="width: 100%" height="100%">
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="jobType" label="工种" align="center">
        </el-table-column>
        <el-table-column prop="idNumber" label="证件号码" align="center">
        </el-table-column>
        <el-table-column prop="position" label="岗位" align="center">
        </el-table-column>
        <el-table-column prop="location" label="当前位置" align="center">
        </el-table-column>
        <el-table-column prop="trajectory" label="人员轨迹" align="center">
        </el-table-column>
        <el-table-column prop="locationDetails" label="定位详情" align="center">
        </el-table-column>
      </el-table>
    </div>

css样式

<style lang="scss" scoped>
  //表格样式
  :deep(.tableListInner) {
    .el-table {
      background-color: rgba(0, 0, 0, 0) !important;
      --el-table-border-color: rgba(10, 63, 145, 0);
      --el-table-border: 0px solid rgba(10, 63, 145, 0);
      --el-table-text-color: #fff;
      --el-table-header-text-color: #fff;
      --el-table-row-hover-bg-color: rgba(0, 0, 0, 0) !important;
      --el-table-current-row-bg-color: var(--el-color-primary-light-9);
      --el-table-header-bg-color: var(--el-bg-color);
      --el-table-fixed-box-shadow: var(--el-box-shadow-light);
      --el-table-bg-color: var(--el-fill-color-blank);
      --el-table-tr-bg-color: var(--el-bg-color);
      --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
      --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
      --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
      --el-table-index: var(--el-index-normal);
    }

    .el-table__header {
      background: url("./assets/headerbg.png") no-repeat;  // 表格头部图片
      background-size: 100% 100%;
    }

    .el-table .cell {
      padding: 10px 12px;
    }

    .el-table th.el-table__cell {
      background: none;
    }

    .el-table .el-table__cell {
      padding: 5px 0 !important;
    }

    .el-table__row {
      margin-top: 9px !important;
      background: url("./assets/itembg.png") no-repeat;  // 表格自定义背景图片
      background-size: 100% 100%;
      height: 34px !important;
      position: relative;
    }

    .el-table__body-wrapper {

      .el-table__row .el-table__cell:last-child {
        &:after {
          content: ' ';
          position: absolute;
          right: 0;
          top: 50%;
          width: 11px;
          height: 19px;
          background: url('./assets/icon_right.png') no-repeat;   //表格右侧图标
          background-size: contain;
          transform: translateY(-50%);
        }
      }

      .el-table__row .el-table__cell:first-child {
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 11px;
          height: 19px;
          background: url('./assets/icon_left.png') no-repeat;  //表格左侧图标
          background-size: contain;
          transform: translateY(-50%);
        }
      }
    }

    .el-table__header-wrapper {
      background-color: rgba(0, 0, 0, 0) !important;
    }

    .el-scrollbar {
      border: 0 !important;
      background: none !important;
    }

    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
      border: 0 !important;
    }

    .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before {
      background-color: rgba(10, 63, 145, 0) !important;
    }

    .el-table--border .el-table__cell {
      border-right: 1px solid rgba(10, 63, 145, 0) !important;
    }

    .el-table tr {
      background-color: rgba(0, 0, 0, 0) !important;
    }

    .el-table thead.is-group th.el-table__cell {
      background-color: rgba(0, 0, 0, 0) !important;
    }
  }
</style>

vue3 element-plus其他插件修改实例

vue3 element-plus 组件修改实例汇总

项目应用

智慧工地监管系统