设置el-table表头中某列的样式
时间: 2023-10-11 17:17:59 浏览: 162
你可以通过 `headerCellStyle` 属性来设置表头中某列的样式。具体做法如下:
1. 在 `el-table-column` 标签中设置 `headerCellStyle` 属性,如下所示:
```html
<el-table-column prop="name" label="姓名" :header-cell-style="headerCellStyle"></el-table-column>
```
2. 在组件的 `data` 中定义 `headerCellStyle` 属性,如下所示:
```javascript
data() {
return {
headerCellStyle: {
backgroundColor: '#f5f7fa',
color: '#909399',
textAlign: 'center',
fontWeight: 'bold'
}
}
}
```
在上述代码中,我们设置了表头中 `姓名` 列的背景色为 `#f5f7fa`,字体颜色为 `#909399`,文本居中,字体加粗。
需要注意的是,`headerCellStyle` 属性中的样式会应用到整个表头,如果想要只针对某一列生效,可以使用 `headerClassName` 属性来设置类名,然后在样式中使用类选择器来选择该列,如下所示:
```html
<el-table-column prop="name" label="姓名" :header-cell-style="headerCellStyle" header-class-name="name-column"></el-table-column>
```
```css
.name-column th {
background-color: #f5f7fa;
color: #909399;
text-align: center;
font-weight: bold;
}
```
阅读全文