vue中当详情、编辑共用一个弹出框时，怎么在详情中禁用所有可编辑的组件，在编辑中又能够启用它们

一般情况下，查询、详情甚至新增，都是用的同一个弹出框，但是他们的要求可能不一样。比如查询时只允许查看，不允许编辑。

我们应该如何实现，在详情中禁止组件编辑，而在编辑中又可以进行编辑呢？
要在详情中禁用所有可编辑的组件，在编辑中又能够启用它们，我们可以使用条件控制渲染来实现。

一、添加一个isEditMode布尔类型数据属性

首先，在 Vue 组件中添加一个额外的状态属性，用于控制组件的编辑模式。例如，我们可以添加一个名为 isEditMode 的布尔类型数据属性。

二、在需要控制的组件上绑定isEditMode属性

在下面的示例代码中，我们将两个 <el-input> 和下拉框 <el-select> 组件都绑定了 isEditMode 属性，通过 :readonly="!isEditMode"和 :disableed="!isEditMode"来动态设置是否启用编辑模式。

三、在查看详情和编辑中分别控制isEditMode的状态

点击修改按钮的时候，将isEditMode状态设为true，对话框中:readonly=false，此时就是可编辑状态。
点击查看详情按钮时，将将isEditMode状态设为false，对话框中:readonly=true，此时就是不可编辑状态。

四、隐藏查询详情对话框的确定按钮

直接加一个v-if="isEditMode"即可，查询详情时将isEditMode设为了false，因此确定按钮就不显示了。

五、最终效果

查询详情：

这里的输入框是无法点击进行编辑的。

修改：

至此，我们想要的效果就已经实现了。

六、附录（完整的对话框代码）

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="班级名称" prop="className">
          <el-input v-model="form.className" :readonly="!this.isEditMode" placeholder="请输入班级名称" />
        </el-form-item>
        <el-form-item label="年级" prop="classGrade">
          <el-select
            v-model="form.classGrade"
            :disabled="!this.isEditMode"
            placeholder="请选择年级"
          >
            <el-option
              v-for="dict in classOptions"
              :key="dict.dictValue"
              :lable="dict.dictLabel"
              :value="dict.dictLabel"
            ></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="班主任" prop="headTeacher">
          <el-input v-model="form.headTeacher" :readonly="!this.isEditMode" placeholder="请输入班主任" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="isEditMode" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>