elementui テーブルの列に背景色を追加します。

キーコード
に示すように、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;
}

すべてのコード

在这里插入代码片