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

xiaoming_0208

已于 2024-01-12 11:39:08 修改

阅读量300

点赞数

文章标签： java html 开发语言

于 2023-04-26 17:11:20 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130390325

版权

根据返回字段文字 :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>