应用效果:

代码:

<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>

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐