Element-UI填坑手册1（持续更新）

el-table

修改默认样式

<div class="record-container current">
<div class="both-center record-title">标题</div>
<div class="record-table-box">
  <div class="between-center search-bar">
    <el-date-picker type="daterange" range-separator="" start-placeholder="请输入所查询时间段" end-placeholder="" v-model="currentRange"></el-date-picker>
    <div class="between-center">
      <div class="both-center search-btn confirm-btn">查询</div>
      <div class="both-center search-btn export-btn">导出</div>
    </div>
  </div>
  <div class="record-table">
    <el-table
      height="100%"
      :data="currentList"
      :element-loading-text="$t('loading')"
      v-loading="listLoading"
      fit
      stripe
    >
      <el-table-column width="65" align="center" type="index" :label="$t('tableNumber')"></el-table-column>
      <el-table-column min-width="120px" align="center" label="xxxx" prop="startDate"></el-table-column>
      <el-table-column min-width="120px" align="center" label="xxxx" prop="startTime"></el-table-column>
      <el-table-column min-width="180px" label="xxxx" prop="content"></el-table-column>
    </el-table>
  </div>
</div>
</div>

.current {
  th {
    background: linear-gradient(180deg, #ff7a00 0%, rgba(251,0,0,0.16) 100%); /* 自定义行表头背景色 */
  }
}
.history {
  th {
    background: linear-gradient(180deg, rgba(190,192,193,0.5) 0%, rgba(104,104,104,0.9) 100%); /* 自定义行表头背景色 */
  }
}
.el-table {
  color: #fff;
  background-color: transparent;
  tr {
    background: rgba(11,38,68,0.35); /* 自定义行默认背景色 */
  }
  tr,
  td,
  th.is-leaf {
    border: none;
  }
  .el-table__empty-text,
  thead {
    color: #fff;
  }
  tbody {
    tr:hover>td {
      background: rgba(11,38,68,0.35); /* 移除行的hover样式 */
    }
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(31,68,120,0.35); /* 自定义隔行变色的默认背景色 */
}