关于elementui的表格样式修改

1

在template标签中 定义的el-table中 定义

            <el-table :data="statisticalAmountList" :row-class-name="tableRowClassName" :header-cell-style="{ background: `#linear-gradient(to right, #80CAFF, #9580FF)` }">
            <el-table/>

在methods中接收

methods:{
    tableRowClassName({ row, rowIndex }) {
    if (rowIndex % 2 === 0) {
      return 'even-row'; // 偶数行类名
    }
    return '';
  }
}

之后再 style标签中定义类名接收

<style lang='scss' scoped>
// 表头整行渐变
::v-deep .left-table .el-table thead tr {
  background: linear-gradient(to right, #80CAFF, #9580FF) !important;
  .cell{
    color: #fff !important;
  }
}
::v-deep .left-table .el-table th.el-table__cell {
  background: transparent !important;
}

// 让tbody所有td都透明，tr的背景才能生效
::v-deep .left-table .el-table .el-table__body td {
  background: transparent !important;
}

// 奇数行（rowIndex % 2 === 1）整行背景
::v-deep .left-table .el-table .el-table__body tr:not(.even-row) {
  background: #e5e4ff !important;
}
// 偶数行（rowIndex % 2 === 0）整行背景
::v-deep .left-table .el-table .el-table__body tr.even-row {
  background: #f8f8f9 !important;
}
// hover 整行渐变
::v-deep .left-table .el-table .el-table__body tr:hover {
  background: linear-gradient(to right, #80CAFF, #9580FF) !important;
  color: #fff;
}
</style>

就可以定义 隔行变色，以及划过每一行颜色变化。