应用效果:
代码:
<template>
......<el-form-item label="文件编号" label-position="right"><el-input v-model="qualityFileForm.fileNo" clearable :disabled="!props.isNew" /></el-form-item>
......<el-form-item label="附件" label-position="right"><el-input class="input-readonly" v-model="qualityFileForm.filePathname" readonly /></el-form-item>
......
</template><style scoped lang="scss">
// 设置等同于disabled的样式效果,背景色 #f5f7fa,字体颜色 #c0c4cc
// 设置类名为 input-readonly 的元素的背景颜色
.input-readonly :deep(.el-input__wrapper) {background-color: #f5f7fa;
}
// 设置只读的input的字体颜色,不使用类名,使用类属性选择器(.类名[属性名])
:deep(.el-input__inner[readonly]) {color: #c0c4cc;
}
</style>