vue修改element-ui el-table的样式，如header的字体颜色、背景色和tr的字体颜色、背景色

<template>
  <el-table
    :data="tableData"
    :row-style="tableRowStyle"
    :header-cell-style="tableHeaderColor">
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="age"
      label="年龄"
      width="120">
    </el-table-column>
    <el-table-column
      property="sex"
      label="性别"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'table',
  data() {
    return {
      tableData: [
        {
          name: 'Cindy',
          age: 20,
          sex: '女'
        },
        {
          name: 'Mila',
          age: 22,
          sex: '女'
        },
        {
          name: 'Bob',
          age: 23,
          sex: '男'
        }
      ]
    }
  },
  created() {},
  methods: {
    // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: pink'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;'
      }
    }
  }
}
</script>

效果如下图：