如何修改el-table表头和表格中文字的颜色
时间: 2024-02-07 11:02:11 浏览: 276
要修改 `el-table` 表头和表格中文字的颜色,你可以使用 CSS 来自定义样式。下面是一个示例代码,演示如何修改文字颜色:
```html
<template>
<el-table>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<!-- 其他表格列 -->
</el-table>
</template>
<style scoped>
.el-table__header th {
color: red; /* 修改表头文字颜色为红色 */
}
.el-table__body td {
color: blue; /* 修改表格中文字颜色为蓝色 */
}
</style>
```
在上述示例中,我们使用了两个 CSS 选择器来修改表头和表格中文字的颜色:
1. `.el-table__header th`:通过这个选择器,我们可以选择 `el-table` 组件中表头的单元格 (`th`),然后使用 `color` 属性来设置文字的颜色。在示例中,我们将表头文字颜色设置为红色。
2. `.el-table__body td`:通过这个选择器,我们可以选择 `el-table` 组件中表格的单元格 (`td`),然后使用 `color` 属性来设置文字的颜色。在示例中,我们将表格中文字的颜色设置为蓝色。
请注意,在上述示例中,我们将 CSS 样式限定在了 `<style scoped>` 标签中,这是为了确保该样式仅适用于当前组件,以避免与其他组件发生冲突。你可以根据需要修改和扩展 CSS 样式来适应你的具体情况,包括文字颜色、背景颜色等。
阅读全文