[JavaScript] elementUI自定义el-table头部的样式

<template>
  <div class="my-table">
  <el-table :data='tableData' :header-cell-style='headerCellStyle'>
    <slot></slot>
  </el-table>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: {
  data: {
    type: Array,
    default() {
    return []
    }
  }
  },
  data() {
  return {
    tableData: []
  }
  },
  created() {
  this.tableData = this.data
  },
  methods: {
  headerCellStyle({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) return 'backgroundColor:red;color:#fff;'
  }
  }
}
</script>

import MyTable from '@components/MyTable'

data() {
  return {
    tableData: [
    {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }
    ]
  }
  },
  components: { MyTable }

<MyTable :data="tableData">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </MyTable>

import MyTable from './index.vue'
export default (Vue) => {
  Vue.component(MyTable.name, MyTable)
}

import MyTable from '@components/MyTable'
Vue.use(MyTable)