使用：style动态绑定字段状态，根据不同状态改变字体颜色；class（根据多项状态使用三目函数判断样式）

根据返回字段文字  :style="status === '离线' ? 'color:red' : 'color:#13eecc'"

<span :style="item.alarm === '1' ? 'color:red' : 'color:#13eecc'"> 
{{ item.alarm == '1' ? '异常' : '正常'}}
</span>

clss动态绑定样式改变：

 :class="type === 12 ? 'styleCss-1'  : type === 24 ? 'styleCss-2'  : type === 8 ? 'styleCss-3'  : 'styleCss-4' "
 

js定义type默认值 

type: 12, //默认2*2

 

 css中给styleCss-1~添加样式：例如：

.styleCss-1 {
width:100%;
}
.styleCss-2 {
width:calc(100% / 2 );
}
.styleCss-3 {
width:calc(100% / 3);
}
.styleCss-4 {
widthcalc(100% / 4 );
}

使用插槽定义页面返回字段不同状态的文字展示：

 <el-table-column prop="status" label="传感器状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '1'">
                在线
              </span>
              <span v-else="scope.row.status === '0'">
                离线
              </span>
            </template>
 </el-table-column>