element,编辑表单的状态可修改表单和不可修改表单shj

不点编辑的时候  表单默认设置true  禁用

点了编辑后 表单禁用取消 可以修改账户的密码 再点确定之后 即回复第一张图状态 

1.  
   <template>
2.  
   <div>
3.  
   <el-form
4.  
   :model="form"
5.  
   ref="form"
6.  
   :rules="rules"
7.  
   label-width="30%"
8.  
   class="demo-ruleForm"
9.  
   >
10.  
    <el-form-item label="账户" prop="account">
11.  
    <el-input
12.  
    v-model.trim="form.account"
13.  
    :disabled="isInput"
14.  
    ></el-input>
15.  
    </el-form-item>
16.  
     
17.  
    <el-form-item label="密码" prop="password">
18.  
    <el-input
19.  
    v-model.trim="form.password"
20.  
    :disabled="isInput"
21.  
    ></el-input>
22.  
    </el-form-item>
23.  
     
24.  
    <el-form-item>
25.  
    <el-button
26.  
    type="primary"
27.  
    @click="submitForm('form')"
28.  
    v-if="!isInput"
29.  
    >确定</el-button>
30.  
    <el-button type="primary" @click="cancel" v-if="!isInput">取消</el-button>
31.  
    <el-button @click="resetForm('form')" v-if="!isInput">重置</el-button>
32.  
    <el-button @click="edit" v-else>编辑</el-button>
33.  
    </el-form-item>
34.  
     
35.  
    </el-form>
36.  
    </div>
37.  
    </template>
38.  
    <script>
39.  
    export default {
40.  
    data() {
41.  
    return {
42.  
    form: {},
43.  
    rules: {
44.  
    account: [
45.  
    //第一个{}区域里满足之后 进行下一个
46.  
    {
47.  
    required: true, //是否必填
48.  
    message: "不能为空" ,//规则
49.  
    trigger: "blur", //何事件触发
50.  
    },
51.  
    { min: 1, max: 20, message: "长度在 1到 20 个字符" },
52.  
    ],
53.  
    password:[
54.  
    {
55.  
    required: true, //是否必填
56.  
    message: "不能为空" ,//规则
57.  
    },
58.  
    { min: 1, max: 12, message: "长度在 1到 12 个字符" }
59.  
    ],
60.  
    },
61.  
    isInput:true
62.  
    };
63.  
     
64.  
    },
65.  
    methods: {
66.  
    //确定按钮
67.  
    submitForm() {
68.  
    this.$refs['form'].validate((valid) => {
69.  
    if (valid) {
70.  
    alert("submit!");
71.  
    this.isInput = true;
72.  
     
73.  
    } else {
74.  
    console.log("error submit!!");
75.  
    return false;
76.  
    }
77.  
    });
78.  
    },
79.  
    //重置
80.  
    resetForm(formName) {
81.  
    this.$refs[formName].resetFields();
82.  
    },
83.  
    //编辑
84.  
    edit(){
85.  
    this.isInput = false;
86.  
    },
87.  
    //取消
88.  
    cancel() {
89.  
    // 1.表单禁用
90.  
    this.isInput = true;
91.  
    // 2.获取数据
92.  
    this.getSave();
93.  
    },
94.  
    },
95.  
    };
96.  
    </script>
97.  
    <style>
98.  
    .el-input__inner {
99.  
    width: 30%;
100.  
     }
101.  
     </style>

这篇好文章是转载于：学新通技术网