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

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/chulaizhadao521147/article/details/84770001

row-class-name的使用

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

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

<el-table :data="this.tablePlyData"  @row-click="mainAppNoInfo" :row-class-name="tableRowClassName" :hidden="displayCtrl.hiddentableFuzhi"><!--  fit="true" border="true" stripe="true" -->
<el-table-column label="订单号" prop="bookingNo"></el-table-column>
<el-table-column label="投保人名称" prop="name"></el-table-column>
<el-table-column label="被保人名称" prop="insuredName"></el-table-column>
<el-table-column label="车牌号码" prop="licenseNo"></el-table-column>
<el-table-column label="产品" prop="insurancemark"></el-table-column>
<el-table-column label="订单时间" prop="orderaddtime"></el-table-column>
<el-table-column label="订单状态" prop="status"></el-table-column>
<el-table-column label="出单员工号" prop="operCde"></el-table-column>
<el-table-column label="承保机构" prop="dptCde"></el-table-column>
</el-table>

第二步：在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互斥，不能同时存在，小小坑的存在！！！
<<<<<<<<<<<<<<<<<<<<<<<<<<<<

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

阅读更多