vue2 element ui table样式自定义

vue yekong

vue2项目需要使用element ui table的功能,但是需要修改样式,这里将实现方式记录下来。

vue2 element ui 表格样式自定义

  <div class="table-container-case">
    <el-table
        ref="singleTable"
        :data="list"
        border
        height="100%"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
        style="width: 100%">
      <el-table-column
          type="index"
          label="name"
          width="60"
          align="center">
        <template slot-scope="scope">
          <div style="color: #FFB832;">{{ scope.$index + 1 }}</div>
        </template>
      </el-table-column>
      <el-table-column
          property="cbr"
          align="center"
          label="name2">
      </el-table-column>
      <el-table-column
          property="zw"
          align="center"
          label="name3">
      </el-table-column>
      <el-table-column
          property="num"
          align="center"
          label="name4">
      </el-table-column>
    </el-table>
  </div>

点击表格高亮并获取数据

handleRowClick(row, event) {
  this.currentRow = row
  this.updateJudgeId(row.judge_id)
  console.log('点击的行数据:', row);
},
tableRowClassName({row, rowIndex}) {
  if (row === this.currentRow) {
    return 'highlight-row';
  }
  return '';
},

css样式

<style lang="less" scoped>
.table-container-case {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
}
</style>
<style lang="less">
.table-container-case {
  .el-table, .el-table__expanded-cell {
    background-color: rgba(0, 0, 0, 0) !important;
  }

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

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

  .el-table .el-table__cell {
  }

  .el-table thead {
    background: #285a9a;
  }

  .el-table--border, .el-table--group {
    border: 1px solid #2b578f;
  }

  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-bottom: 1px solid #2b578f;
    border-right: 1px solid #2b578f;
  }

  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: #2b578f;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #2b578f;
  }

  .el-table th.el-table__cell > .cell {
    font-size: 14px;
    font-family: MicrosoftYaHeiSemibold;
    color: #FFFFFF;
  }

  .el-table {
    color: #FFFFFF;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #2d77b4 !important;
  }

  .el-table tr.highlight-row {
    background-color: #2d78b5 !important; /* 你的高亮颜色 */
  }
}
</style>
喜欢