vue.js+element-ui,页面中使用row-class-name属性达到表格中状态、颜色的区分

row-class-name的使用

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

第一步：在el-table标签中加上row-class-name属性（属性前面的冒号表示数据绑定）

第二步：在css样式文件中添加样式（当然，这个样式文件要引入到.html文件中的）

.el-table .info-row {
    background: #c9e5f5;
  }

.el-table .positive-row {
    background: #e2f0e4;
  }
  
.el-table .warm-row {
    background: #f9c855;
  }

第三步：在js文件中添加回调方法（即methods模块中）

【写方法的板式可能略有不同，以自己的项目规定的为准】

//根据产品的类型换每条数据的背景颜色
"tableRowClassName" : function(row) {
	if (row.insurancemark === "单交强" || row.insurancemark === "1") {
 		return 'info-row';
	} else if(row.insurancemark === "单商业" || row.insurancemark === "2"){
		return 'positive-row';
	}else if(row.insurancemark === "交商联合" || row.insurancemark === "3"){
		return 'warm-row';
	}
		return '';
},

类似代码，element-ui官网教程中也有示例，点击查看

注意的一点是：

参数	说明	类型	可选值	默认值
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function(row, index)/String	-	-
stripe	是否为斑马纹 table	boolean	-	false

如果你之前的表格设置了把stripe 属性设置为了true，即斑马纹显示，后又设置了row-class-name属性，那row-class-name的效果不会完全体现，还是斑马纹，就是斑马纹的颜色变化了，即row-class-name属性与stripe = true互斥，不能同时存在，小小坑的存在！！！
<<<<<<<<<<<<<<<<<<<<<<<<<<<<

不足或有误之处，欢迎批评指正！