Element - Vue改变表格某一列的单元格颜色,只需要在el-table标签中加上:cell-style="cellStyle",以及实现该方法即可。
<el-table
border
size="mini"
:data="productData.list"
row-key="id"
:cell-style="cellStyle"
ref="productDataTable"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" reserve-selection align="center"></el-table-column>
<el-table-column label="商品ID" prop="id" width="60" align="center"></el-table-column>
<el-table-column label="未审核" width="80" align="center">
<template slot-scope="scope">
<el-link type="danger" v-if="scope.row.nonChecked === 0">{{scope.row.nonChecked}}</el-link>
<el-link type="warning" v-else>{{scope.row.nonChecked}}</el-link>
</template>
</el-table-column>
<el-table-column
label="操作"
prop="operation"
width="160"
align="center">
<template slot-scope="props">
<el-button
type="primary"
plain
circle
size="mini"
title="详情"
class="el-icon-document"
@click="
getProductInfo(props.$index, props.row);
showDialog();">
</el-button>
<el-popconfirm
confirmButtonText="确定"
cancelButtonText="取消"
@confirm="handleDelete(props.$index)"
@cancel="cancelDelete()"
title="确认删除此记录?">
<el-button
type="danger"
plain
circle
size="mini"
title="删除"
slot="reference"
class="el-icon-delete">
</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
methods:{
/**
* 改变表格某一列的单元格颜色
*/
cellStyle({row, column, rowIndex, columnIndex}) {
let cellStyle;
switch(row.nonChecked) {
case 1:
cellStyle = 'background: #ffdcdc;';
break;
case 0:
cellStyle = '';
break;
default:
cellStyle = '';
}
if(column.label == '未审核') {
return cellStyle;
}
},
}