（Element UI 组件 Table ）如何给表格添加样式

在使用 Element UI 设计表格的时候，如果没有特别修饰，表格的风格可能是如下这样的，但有时候我们也需要添加一些样式。

查阅官方文档，我们发现如下属性。主要是以 row、cell、header-row、header-cell 进行分类来控制样式。

参数	说明	类型	可选值	默认值
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String	/	/
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex})/Object	/	/
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	/	/
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	/	/
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	Function({row, rowIndex})/String	/	/
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex})/Object	/	/
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	/	/
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	/	/

下面给表格添加一个黑色背景，白色文字的暗黑效果

为 el-table 添加 cell-style 和 header-cell-style 属性，并传入函数，由于表头和表数据的样式都一样，因此传入了相同函数。 

<el-table :cell-style="cellStyle" :header-cell-style="cellStyle">

以下是函数体 

cellStyle() {
    return {
        background: "#000000",
        color: "#ffffff",
    };
},