el-table动态单元格改变背景颜色
时间: 2023-10-09 09:16:51 浏览: 75
您可以使用`row-class-name`属性来动态改变`el-table`中单元格的背景颜色。首先,您需要创建一个方法来根据单元格的值返回相应的class名称。然后,在`el-table`组件中使用`row-class-name`属性,并将方法名作为属性值。
以下是一个示例:
```vue
<template>
<el-table :data="tableData" row-class-name="setRowClassName">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 25 },
{ name: 'Bob', age: 30 }
]
};
},
methods: {
setRowClassName(row) {
if (row.age > 25) {
return 'highlight-row'; // 返回class名称
}
return '';
}
}
};
</script>
<style>
.highlight-row {
background-color: yellow; // 设置背景颜色
}
</style>
```
在上述示例中,如果`age`大于25,则该行的背景颜色将变为黄色。您可以根据自己的需求修改条件和样式。