不点编辑的时候 表单默认设置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>
今天的文章element表格可编辑_element可编辑表格「建议收藏」分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/63401.html