el-table-column怎么设置背景颜色
时间: 2023-11-23 21:56:09 浏览: 124
可以通过在el-table-column中添加prop属性和formatter属性来设置el-table-column的背景颜色。其中prop属性用于指定列的字段名,formatter属性用于格式化列的内容。具体实现方法如下:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" :formatter="nameFormatter"></el-table-column>
<el-table-column prop="age" label="年龄" :formatter="ageFormatter"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
nameFormatter(row) {
return `<div style="background-color: #fffaee">${row.name}</div>`
},
ageFormatter(row) {
return `<div style="background-color: #FFBD7C">${row.age}</div>`
}
}
}
```
在上面的代码中,我们通过在nameFormatter和ageFormatter方法中返回一个带有背景颜色的div元素来设置el-table-column的背景颜色。其中,nameFormatter方法用于设置姓名列的背景颜色为#fffaee,ageFormatter方法用于设置年龄列的背景颜色为#FFBD7C。
阅读全文