el-table 自定义样式

如果你想要对 Element UI 的 `el-table` 组件进行自定义样式，可以使用以下方法：

1. 使用 `slot` 插槽

`el-table` 组件提供了多个 `slot` 插槽，可以让你自定义表格的各个部分的样式和内容。例如，你可以使用 `header` 插槽来自定义表格头部的样式和内容，使用 `empty` 插槽来自定义数据为空时的提示信息。

<el-table :data="tableData">
  <template v-slot:header>
    <th class="custom-header">自定义表格头</th>
  </template>
  <template v-slot:empty>
    <div class="custom-empty">暂无数据</div>
  </template>
</el-table>

在这个例子中，我们使用 `header` 插槽自定义了表格头的样式和内容，使用 `empty` 插槽自定义了数据为空时的提示信息。我们可以在 CSS 中定义 `.custom-header` 和 `.custom-empty` 类，来对其进行自定义样式。

2. 使用 CSS

你可以使用 CSS 来对 `el-table` 组件进行自定义样式。例如，你可以使用类选择器来修改表格的各个部分的样式，如表格头、表格行、表格列等等。

<el-table :data="tableData" class="custom-table">
</el-table>

.custom-table .el-table__header {
  background-color: #f2f2f2;
  font-weight: bold;
}

.custom-table .el-table__row:hover {
  background-color: #f5f5f5;
}

在这个例子中，我们在 `el-table` 上添加了一个名为 `custom-table` 的类，然后在 CSS 中使用类选择器 `.custom-table` 来修改表格的样式。我们可以使用 `.el-table__header` 来修改表格头的样式，使用 `.el-table__row` 来修改表格行的样式。