el-table属性row-class-name用法及踩坑
需求前提：想要给表格的某一行加上不同的background，用来区分当前行的状态
根据官方给出的文档官方文档
在el-table中绑定自定义属性row-class-name
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
</el-table>
在methods中定义方法,这里用来给某一行的状态加上class
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
}
给自己定义的class设置样式
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
踩坑笔记
使用row.userName 等变量时，值为undefined，这时候要看看在tableRowClassName方法内，参数是个对象，所以要解构再使用啊！
使用后没有效果的问题！！！！！
第一步： 看看class有没有加上去
第二步： 如果class都加上去了也没有效果，看一下有没有使用stripe这个属性，这个属性是带斑马纹的表格样式，它和row-class-name共存时是没有效果滴
第三步：如果你也没有使用到stripe这个属性，那就要找样式的问题啦
使用scoped设置了样式作用域 ,这个会影响到class的样式
可以尝试使用/deep/深度选择器,必须在sass或less下
/deep/ .el-table .warning-row {
background: oldlace;
}
/deep/ .el-table .success-row {
background: #f0f9eb;
}
使用 >>>深度选择器，只支持css
.el-table >>> .warning-row {
background: oldlace;
}
.el-table >>> .success-row {
background: #f0f9eb;
}
以上仅为个人理解，欢迎各位大佬批评指正！！！！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_39018944/article/details/113184948
