el-table-column设置背景色
时间: 2023-08-13 10:07:46 浏览: 203
您可以使用 `slot-scope` 属性和 `cell-style` 属性来设置 `el-table-column` 的背景色。具体实现如下:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="{row}">
<div :style="{background: row.color}">{{row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" cell-style="background: #f0f0f0;"></el-table-column>
</el-table>
```
在上述代码中,我们使用 `slot-scope` 属性来获取每一行数据,并在模板中使用 `div` 标签来设置背景色。同时,我们在第二个 `el-table-column` 中使用 `cell-style` 属性来设置背景色。
您可以根据自己的需求修改代码中的属性值。
相关问题
el-table这个表格设置背景色
要设置el-table的背景色,可以使用el-table的style属性来设置。例如:
```
<el-table :data="tableData" style="background-color: lightblue;">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
在上面的例子中,我们将el-table的背景色设置为浅蓝色。你可以根据自己的需要调整背景色的值。
<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="考核指标"></el-table-column> <el-table-column prop="date" label="具体事项(原)"></el-table-column> <el-table-column label="具体事项(新)" prop="item"> <el-table-column prop="province" label="考核要点"></el-table-column> <el-table-column prop="city" label="计分方法"></el-table-column> <el-table-column prop="address" label="考核目标"></el-table-column> </el-table-column> <el-table-column prop="date" label="考核周期"></el-table-column> </el-table> </el-container> </template>如何将每个表头设置为不同的颜色
可以使用 `headerCellStyle` 属性来设置表头单元格的样式。例如,你可以在 `el-table-column` 标签中为每个表头单元格设置不同的背景色:
```html
<template>
<el-container style="height: 100%">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="考核指标" header-style="{background:'#ff0000'}"></el-table-column>
<el-table-column prop="date" label="具体事项(原)" header-style="{background:'#00ff00'}"></el-table-column>
<el-table-column label="具体事项(新)" prop="item" header-style="{background:'#0000ff'}">
<el-table-column prop="province" label="考核要点"></el-table-column>
<el-table-column prop="city" label="计分方法"></el-table-column>
<el-table-column prop="address" label="考核目标"></el-table-column>
</el-table-column>
<el-table-column prop="date" label="考核周期" header-style="{background:'#ffff00'}"></el-table-column>
</el-table>
</el-container>
</template>
```
在上面的例子中,`headerStyle` 绑定了一个对象,该对象包含一个 `background` 属性,该属性指定了表头单元格的背景色。你可以根据需要修改 `background` 属性的值来设置不同的颜色。