el-table每行背景色
时间: 2024-10-15 22:15:08 浏览: 25
vue修改Element的el-table样式的4种方法
在Element UI的el-table组件中,你可以通过设置`row-class-name`属性来自定义每一行的背景色。这个属性接受一个函数作为值,该函数接收当前行的数据`row`作为参数,返回一个CSS class名。例如:
```html
<template>
<el-table :data="tableData" :row-class-name="getRowClass">
<!-- ...其他表格列... -->
</el-table>
</template>
<script>
export default {
methods: {
getRowClass(row) {
// 根据row数据动态计算背景色
let color;
if (row.status === 'active') {
color = 'custom-active-row'; // 活跃状态背景色
} else if (row.isFinished) {
color = 'custom-done-row'; // 完成状态背景色
} else {
color = ''; // 默认或未定义状态背景色
}
return `custom-row-${color}`;
}
}
}
</script>
<style scoped>
.custom-row-custom-active-row {
background-color: #f0f9ee; /* 活跃状态背景颜色 */
}
.custom-row-custom-done-row {
background-color: #e4e8eb; /* 完成状态背景颜色 */
}
</style>
```
在这个例子中,我们根据`row`对象中的状态属性设置了不同的背景颜色。你可以根据实际需求修改这个函数。
阅读全文