ElementUI 设置表头样式（背景色、字体颜色、高度、居中）

在实际的项目开发过程中，表头背景色的设置是非常常见的，然而ElementUI的样例中，没有相关的样例。这就很让人头大，真就 “高端的表格往往只需要最原始的表头样式”

无奈之下，我们只能细细研读ElementUI提供的一些 Table Attributes【表格属性】。附上官方链接：https://element.eleme.cn/#/zh-CN/component/table
我们很快就能锁定了两个属性：header-row-style，header-cell-style

把官方的话翻译成通俗易懂的话就是，你可以直接将这个属性绑定一个对象，或者接收一个方法的返回值。比如：
:header-row-style={key: value}或者:header-row-style=getStyle(row, rowIndex)
但是我不太理解header-row-style与header-cell-style之间的区别：

• header-row-style：为所有表头行设置一样的 Style
• header-cell-style：为所有表头单元格设置一样的 Style
  这表头行是指设置一行的意思吗？这表头单元格倒是很好理解。

我们来测试一下：
在项目中使用:header-row-style="{background:#409EFF',color:'white'}" 并没有发生任何作用，这就奇怪了。
再来试试 :header-cell-style="{background:'#409EFF',color:'#409EFF'}"
这个确实达到了我想要的效果，表头前景色和背景色都设置成功了。居中只要再加上'text-align': 'center'即可。

那header-row-style可以设置什么？他的作用是？
我做了大量的测试，发现这东西就只能设置个行高，:header-row-style="{'line-height': '150px'}"
不过这个用header-cell-style同样能做。这就很蜜汁操作了。

总结

修改表头的单元格样式都可以通过header-cell-style中绑定对象来做，回应标题中的操作应该就是:header-cell-style="{background:#409EFF', color:'white', 'line-hight':'50px', 'text-align': 'center'}"