elementui表格头部背景色
时间: 2023-09-03 20:08:27 浏览: 107
表格循环滚动(elementui)、背景透明
要设置 Element UI 表格头部的背景色,可以使用`header-row-class-name`属性。该属性可以接受一个字符串或者一个函数,用于指定自定义的类名。
如果要设置所有表格的头部背景色,可以在全局样式中添加以下 CSS 代码:
```css
.el-table .el-table__header thead {
background-color: #f5f7fa;
}
```
如果只需要为特定的表格设置不同的头部背景色,可以在表格组件中添加 `header-row-class-name` 属性,例如:
```html
<el-table :data="tableData" :header-row-class-name="customHeaderClass"></el-table>
```
然后在 Vue 实例中定义 `customHeaderClass` 方法来返回自定义的类名,如下所示:
```javascript
data() {
return {
tableData: [],
};
},
methods: {
customHeaderClass() {
return 'custom-header-class';
},
},
```
最后,在全局样式或者组件样式中设置 `custom-header-class` 类的样式,以达到设置头部背景色的效果:
```css
.custom-header-class {
background-color: #f5f7fa;
}
```
这样就可以通过设置类名来改变 Element UI 表格头部的背景色了。
阅读全文