<el-table-column>更改背景颜色
时间: 2024-06-17 07:05:34 浏览: 14
可以通过使用 el-table-column 的 slot-scope 属性,结合自定义的模板来更改表格列的背景颜色。具体步骤如下:
1. 在 el-table-column 中添加 slot-scope 属性,并定义一个名称,例如 scope。
2. 在模板中使用 scope.row 对应列的数据,来设置该列的背景颜色。
以下是一个示例代码:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<div :style="{backgroundColor: scope.row.color}">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
<template slot-scope="scope">
<div>{{ scope.row.age }}</div>
</template>
</el-table-column>
</el-table>
```
在上面的示例中,我们通过自定义模板来更改第一列的背景颜色。其中,scope.row 表示当前行的数据,color 是该行数据中自定义的颜色属性。我们通过 :style 绑定一个对象来设置该列的背景颜色。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)