在表格中通过后台返回数据来判断图标的变化

方法1:

如上,后台返回的status=1为已阅,status=0为未批阅,已阅则显示绿色的图标,我这里是用vue+elementui来实现的:

<el-table-column label="已阅">

<template slot-scope="scope">

<div>

<i class="el-icon-success" v-show="scope.row.status==1" style="color:#67c23A;font-size: 16px;"></i>

<i class="el-icon-error" v-show="scope.row.status==0" style="font-size: 16px;"></i>

</div> 

</template>

</el-table-column>

 方法2:

只用一个图标,通过改变该图标颜色来实现

<el-table-column label="已阅">

<template slot-scope="scope">

<div>

<i class="el-icon-success" :style="{'color': (scope.row.status==1? '#67c23A':'#606266')}" ></i>

</div>

</template>

</el-table-column>

 

 

Logo

前往低代码交流专区

更多推荐