表格隔行变色有两种方式
第一种,我们给表格设置“stripe”属性
<el-table
:data="tableWarningData"
style="width: 100%"
:header-cell-style="{ color: '#1572e9' }"
stripe
:cell-style="changeCellStyle">
然后在style里面写下如下代码
.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped
.el-table__row--striped td {
background-color:#eaf3fb;
}
第二种,我们给表格设置row-class-name属性
<el-table
:data="tableCreditData"
style="width: 100%"
:header-cell-style="{ color: '#1572e9' }"
:row-class-name="tableRowClassName">
然后在methods里面写下如下代码
// 表格隔行变色
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return 'success-row' //这是类名
} else {
return ''
}
},
在style里面写下“success-row”类的样式
.success-row {
background-color:#eaf3fb !important;
}
注意样式要写在<style lang="scss"></style>里面,我之前一直在写在<style lang="scss" scoped></style>里面,导致隔行没有效果,加了"scoped"就是限制样式只能在本组件中使用,就不能覆盖element-ui里面的样式,避坑!!!