elementui 表格某一列添加背景颜色;
如图
重点代码
//:cell-class-name="rowClass" :cell-style="rowStyle"
<el-table :data="rightsListData" :cell-class-name="rowClass":cell-style="rowStyle"
stripe :span-method="objectSpanMethod" border style="width: 100%;" :show-header="false">
<el-table-column prop="id" label="基础权益内容1" min-width="10%" align="center">
</el-table-column>
<el-table-column prop="name" label="基础权益内容2" min-width="30%" align="center">
</el-table-column>
<el-table-column prop="amount1" label="至尊会员" min-width="10%" align="center">
</el-table-column>
</el-table>
methods:{
rowStyle({
row,
column,
rowIndex,
columnIndex
}) {
//this.levelData='至尊会员'
if (column.label == this.levelData) {
return {
background: '#E7ECFF'
}
}
},
rowClass({
row,
column,
rowIndex,
columnIndex
}) {
//this.levelData='至尊会员'
if (column.label == this.levelData) {
return 'rowClassOne'
} else if (column.label == '基础权益内容1') {
return 'rowClassTwo'
} else {
return 'rowClassThree'
}
}
}
.rowClassOne {
font-size: 14px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: left;
color: #848484 !important;
background-color: #E7ECFF;
}
.rowClassTwo {
font-size: 14px;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
text-align: left;
color: #222222;
}
.rowClassThree {
font-size: 14px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: left;
color: #848484 !important;
}
全部代码
在这里插入代码片