Element form automatically fills in information

When entering for the first time, it will automatically fill in the information

 The input box in the element has a read-only attribute

Add a read-only attribute to the input box and listen to get the focus and then bind a variable

<div class="form">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
        <el-form-item label="电子邮件地址" prop="email">
            <el-input :readonly="readonlyData" @focus=focusFn v-model="ruleForm.email"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input :readonly="readonlyData" @focus=focusFn type="password" v-model="ruleForm.password"/>
        </el-form-item>
    </el-form>
</div>

Define this variable, its function is to judge whether the read-only attribute is true or false 

let readonlyData = ref(true)

Define a handler function when the input box gets focus

The function of this function is to remove the read-only attribute when the input box gets the focus

function focusFn() {
    readonlyData.value = false
}