效果图:
实例代码:
HTML:
<el-form-item label="是否识别百家号" prop="admitIsIdentify" :class="isActive ? 'isClass':'noClass'">
<el-input disabled v-model="form.admitIsIdentify" placeholder="" style="width:400px;" />
</el-form-item>
javaScript:
const isActive = ref(false)
const handleUpdate = async (row?: BaijiaContentVO) => {
const _id = row?.id || ids.value[0]
const res = await getBaijiaContent(_id);
if(res.data.admitIsIdentify === '是'){
isActive.value = true
} else if(res.data.admitIsIdentify === '否'){
isActive.value = false
}
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改发布内容";
}
CSS:
<style scoped>
.isClass .el-form-item__label{
color:green;
font-weight:bold;
font-size:18px
}
.noClass .el-form-item__label{
color:red;
font-weight:bold;
font-size:18px
}
</style>