假设有需求:

后台返回状态1:启用,0:禁用

1、若要使启用为绿色,禁用不添加其他样式

 <el-table-column
            prop="statusName"
            align="center"
            label="状态">
            <template slot-scope="scope">
              <div :class="{active:scope.row.status==1}">
                {{ scope.row.statusName }}
              </div>
            </template>
          </el-table-column>
 .active{
    color:green;
  }

1、若要使启用为绿色,禁用为红色,可使用三元表达式绑定样式

 <el-table-column
            prop="statusName"
            align="center"
            label="状态">
            <template slot-scope="scope">
              <div :class="scope.row.status==1? 'active':'native'">
                {{ scope.row.statusName }}
              </div>
            </template>
          </el-table-column>
.active{
    color:green;
  }
  .native{
    color:red;
  }

 

Logo

前往低代码交流专区

更多推荐