elementui动态设置行背景颜色

element-ui提供了一种动态设置行背景颜色的方法。可以通过自定义表格的row-class-name属性来实现。
在使用element-ui的el-table组件时，我们可以通过设置row-class-name属性来动态控制行的样式。该属性接收一个函数，函数的参数是当前行的数据，我们可以根据数据的不同来返回不同的类名，从而实现动态设置行背景颜色。
具体的实现步骤如下：
1. 在el-table组件中设置row-class-name属性，并将其值设为一个函数。
2. 在该函数中根据数据的不同返回不同的类名，注意要使用三元表达式或其他判断条件来确定返回的类名。
3. 在样式文件中定义对应的类名，设定对应的背景颜色。
这样，当渲染表格时，element-ui会自动根据row-class-name属性中的函数来判断每一行应该应用哪个类名，从而将对应的背景颜色应用到该行中。

举个例子，假设我们需要在表格中根据数据中的某个字段值来动态设置行的背景颜色。我们可以在el-table中设置row-class-name属性为一个函数，该函数的参数是当前行的数据。然后在该函数中判断字段值，如果满足条件，则返回一个定义了对应背景颜色的类名，否则返回空字符串或默认类名。
示例代码如下：

<el-table :data="tableData" :row-class-name="rowClassName">
<!-- 表格列定义 -->
</el-table>

...
methods: {
rowClassName(row) {
// 根据字段值动态设置行背景颜色
return row.field === 'value' ? 'highlight-row' : '';
}
}

样式文件中定义highlight-row类名的背景颜色：
.highlight-row {
background-color: yellow;
}

通过以上方法，我们就可以根据数据的不同动态设置行背景颜色了。需要注意的是，row-class-name属性中的函数返回的类名必须在样式文件中有定义，否则无法生效。