element component, set the modification of the form and the form prohibition attribute shj

When not editing, the form defaults to true and disabled

After clicking Edit, the form is disabled, Cancel, you can modify the password of the account, and then click OK to reply to the first picture status 

<template>
  <div>
    <el-form 
     :model="form"
     ref="form" 
     :rules="rules"
     label-width="30%"
     class="demo-ruleForm"
    >
      <el-form-item label="账户" prop="account">
        <el-input 
         v-model.trim="form.account"
        :disabled="isInput"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input 
         v-model.trim="form.password"
         :disabled="isInput"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button 
         type="primary"
         @click="submitForm('form')" 
         v-if="!isInput"
         >确定</el-button>
        <el-button type="primary" @click="cancel"  v-if="!isInput">取消</el-button>
        <el-button @click="resetForm('form')" v-if="!isInput">重置</el-button>
        <el-button @click="edit" v-else>编辑</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        account: [
          //第一个{}区域里满足之后 进行下一个
          {
            required: true, //是否必填
            message: "不能为空" ,//规则
            trigger: "blur", //何事件触发
          },
          { min: 1, max: 20, message: "长度在 1到 20 个字符" },
        ],
        password:[
          {
           required: true, //是否必填
           message: "不能为空" ,//规则
          },
          { min: 1, max: 12, message: "长度在 1到 12 个字符" }
        ],
      },
      isInput:true
    };
   
  },
  methods: {
    //确定按钮
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.isInput = true;

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //编辑
    edit(){
      this.isInput = false;
    },
    //取消
    cancel() {
      // 1.表单禁用
      this.isInput = true;
      // 2.获取数据
      this.getSave();
    },
  },
};
</script>
<style>
.el-input__inner {
  width: 30%;
}
</style>