可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。
注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。
注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。
这个确实要说三遍,很多人设置了不生效的原因就是这个。
使用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;}
下面的就是官网的例子
<template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>
<style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}}
</script>