vue element el-table单元格字体颜色变更
vue elementel-table单元格字体颜色变更
·
需求:表格中员工确认状态列单元格内容为”已强制确认“时,字体显示成橙色
由于是某个单元格的样式变化。选择使用slot-scope实现,代码如下:
<el-table-column prop="staffSureState" label="员工确认状态" width="170">
<template v-slot="scope">
<span :class="fontLightClass(scope.row.staffSureState)">{{ scope.row.staffSureState }}</span>
</template>
</el-table-column>
在methods中的代码如下:
fontLightClass(staffSureState){
if(staffSureState == "已强制确认"){
return 'fOrange'
}
},
css中代码如下:
.fOrange{
color:#ff6600;
}
更多推荐
所有评论(0)