编辑表单切换为查看表单时设置只读状态

后台管理系统经常遇到弹出一个弹框同时实现新增、编辑、查看的功能，当切换为查看时，我们需要把整个表单设置为只读/禁选/禁止输入状态，避免用户对表单重新操作。实现的方法很多，记录一下今天发现的一个非常简单的方法

步骤如下：

1. computed中新增变量

computed: {
    editDisabled() {
      if (this.dialogTitle === "查看配送渠道") {
        // 查看配送渠道设为只读状态
        return true;
      }
      return false;
    },
  },

2. 给表单添加类名

<el-form  ref="form" :rules="rules" label-width="120px" label-position="left" :model="form" :class="{  disabledEdit: editDisabled }">
</el-form>

3.给表单下所有的el-form-item__content 添加 pointer-events: none;

.disabledEdit {
    .el-form-item__content {
      pointer-events: none;
    }
  }

这样就可以减少大量的冗余代码了。
其他方法：
通过js遍历或者在html中给每一个表单元素添加字段来切换readonly或disabled属性。