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; }
-
-
以上仅为个人理解，欢迎各位大佬批评指正！！！！
