elementui 表格某一列添加背景颜色

最新推荐文章于 2024-04-24 09:40:33 发布

九点五亿少女的梦

最新推荐文章于 2024-04-24 09:40:33 发布

阅读量695

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/weixin_44856917/article/details/129182820

版权

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;
}