el-form表单简洁有效地解决新增与查看详情共用一个页面问题，控制el-form的disabled设置和修改样式

1、需求背景：有时我们想要新增、编辑和查看详情共用一个页面，但el-form表单新增和编辑数据时需要表单项可以输入数据，而查看详情时输入框是不可以输入数据的状态，那么我们可以通过设置与控制el-form的disabled属性来实现。

2、具体实现方法：

1）给el-form设置disabled属性，disabled属性值根据操作类型（新增、编辑、查看）operateType==='view'控制；

disabled=true即查看详情数据时效果图如下：

上面效果图存在问题：输入框有灰色背景、字体模糊、还有禁用小红圈出现。

2）通过样式修改解决el-form表单禁用状态下的输入框有灰色背景、字体模糊、还有禁用小红圈出现的问题。

样式设置代码如下：

<style lang='scss' scoped>
::v-deep .el-form {
    .el-input.is-disabled {
        .el-input__inner {
            color: #606266;
            cursor: unset;//输入框去掉禁用小红圈的显示
            background-color: #fff;
            border-color: #eef;
        }

        .el-input__icon {
            cursor: unset;//日期时间等组件内的小图标去掉禁用小红圈的显示
        }
    }
}
</style>

样式修改后最终效果图：

此方案可以使代码非常简洁有效地解决新增与查看详情共用一个页面的情况。