vue3+element-plus 输入框el-input设置背景颜色和字体颜色，样式效果等同于不可编辑的效果

应用效果：

代码：

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