element table 自定义样式

vue yekong

element table 自定义样式

html

<el-table
      class="eltables"
      stripe
      :data="tableData">
      <el-table-column
        prop="type"
        label="处室">
      </el-table-column>
      <el-table-column
        prop="type"
        label="项目名称">
      </el-table-column>
      <el-table-column
        prop="num1"
        label="预算数">
      </el-table-column>
      <el-table-column
        prop="num2"
        label="调整数">
      </el-table-column>
      <el-table-column
        prop="num2"
        label="执行数">
      </el-table-column>
      <el-table-column
        prop="num3"
        label="执行率">
        <template slot-scope="scope">
          <span class="bjs">{{ scope.row.num3 }}</span>
        </template>
      </el-table-column>
    </el-table>

css

  .eltables {
    width: calc(100% - 48px);
    margin-left: 24px;
  }

  ::v-deep {
    .el-table, .el-table__expanded-cell {
      background: none;
    }

    .el-table th, .el-table tr {
      background: none;
      font-size: 13px;
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background: rgba(9, 124, 184, 0.2);

    }

    .has-gutter {
      background: rgba(39, 124, 246, 0.3);
      color: rgba(255, 255, 255, 1);
    }

    .el-table td, .el-table th.is-leaf {
      border: none;
      color: #fff;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: rgba(9, 124, 184, 0.2);
      color: #fff;
    }

    .el-table td, .el-table th {
      padding: 6px 0;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
      display: none;
    }
  }
喜欢