composant d'élément, définissez la modification du formulaire et l'attribut d'interdiction de formulaire shj

Lorsqu'il n'est pas modifié, le formulaire par défaut est vrai et désactivé

Après avoir cliqué sur Modifier, le formulaire est désactivé, Annuler, vous pouvez modifier le mot de passe du compte, puis cliquez sur OK pour répondre à la première image d'état 

<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>