el-table 怎么修改表头和表格的背景颜色

你可以通过使用`header-style`和`row-style`属性来修改`el-table`的表头和表格的背景颜色。

1. 修改表头的背景颜色：
你可以使用`header-style`属性来自定义表头的样式。通过设置该属性，你可以指定表头的背景颜色。

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" header-style="background-color: #f0f0f0;"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在上面的示例中，`header-style`属性被添加到了第一个表头列上，并设置了背景颜色为 `#f0f0f0`。

2. 修改表格的行背景颜色：
你可以使用`row-style`属性来自定义表格行的样式。通过设置该属性，你可以指定表格行的背景颜色。

<el-table :data="tableData" style="width: 100%" row-style="rowStyle">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

在上面的示例中，我们将`row-style`属性设置为一个方法 `rowStyle`，并在方法中返回一个对象，其中可以指定行样式的各种属性，如背景颜色。

export default {
  methods: {
    rowStyle(row, index) {
      if (index % 2 === 0) {
        return {
          background: '#f0f0f0',
        };
      }
    },
  },
};

在上面的示例中，我们通过 `rowStyle` 方法来设置奇数行的背景颜色为 `#f0f0f0`。

通过使用`header-style`和`row-style`属性，你可以自定义`el-table`的表头和表格的背景颜色。你可以根据实际需求进行调整和优化。