不点编辑的时候 表单默认设置true 禁用
点了编辑后 表单禁用取消 可以修改账户的密码 再点确定之后 即回复第一张图状态
<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>