查看新增编辑共用一个弹窗

      <!--查看 新增，编辑 -->
       <el-dialog :title="dialogFormType" :before-close="dialogClearClose" append-to-body :visible.sync="dialogSeeForm" style="width:50%;margin:auto;white-space: nowrap">
          <el-form :model="addSeeForm" :rules="rulesAddForm" ref="addSeeForm" label-width="80px" >
             <el-form-item label="姓名：" prop="username">
               <el-input v-model="addSeeForm.username" style="width:240px" :disabled="isSee"  size="small"></el-input>
               <!-- <div v-else>{{ addSeeForm.username }} </div> -->
             </el-form-item>
             <el-form-item label="手机号：" prop="phone">
               <el-input v-model="addSeeForm.phone" maxlength="11" :disabled="isSeeOne" oninput="value=value.replace(/[^\d.]/g,'')" style="width:240px" size="small"></el-input>
               <!-- <div v-else>{{ addSeeForm.phone }} </div> -->
             </el-form-item>
             <el-form-item label="职位：" prop="position">
              <el-input v-model="addSeeForm.position" :disabled="isSee" style="width: 240px !important;" clearable placeholder="请输入职位" size="small"></el-input>
              <!-- <div v-else>{{ addSeeForm.position }} </div> -->
             </el-form-item>
             <el-form-item label="状态：" prop="status" >
              <el-select v-model="addSeeForm.status"  style="width: 240px !important;" placeholder="请选择" size="small">
                <el-option v-for="item in positionList" 
                       :key="item.value" 
                       :label="item.label" 
                       :value="item.value"
                       :disabled="isSee"
                       >
                </el-option>
              </el-select>
              <!-- <div v-else>{{ addSeeForm.status == '0' ?'已启用':'已禁用' }} </div> -->
             </el-form-item>
             <el-form-item label="备注" prop="remark">
              <textarea  v-model="addSeeForm.remark" :disabled="isSee" class="el-textarea__inner" style="width:240px;"></textarea>
            </el-form-item>
          <el-form-item v-if="isSave">
            <el-button size="small" type="primary" @click="preservationButton('addSeeForm')">保存</el-button>
            <el-button size="small" style="margin-right:90px;width:60px" @click="cancelButton('addSeeForm')">取消</el-button>
          </el-form-item>
         </el-form>
       </el-dialog>

:disabled = true 为表单不可输入状态。

重点在于:disabled="isSee"上。isSee默认false（如果有表单个别参数有要求设置为不可输入，即可和我如上代码一样重新定义一个变量）

拿编辑举例：

 

 

     /**
       * 编辑功能
       */
       editButton(row,formName){
        this.editId = row.id
        this.dialogFormType = '编辑';
        this.dialogSeeForm = true; 
        this.isSave = true;
        getSeeList(row.id).then(res => {
          console.log(res,'这是编辑');
          this.addSeeForm = res.data.data
          this.isSee = false
          this.isSee1 = true
        })
       },

这样即可实现表单可输入和不可输入两种状态。