実装機能：
新しいボタンと変更されたボタンを指定し、新しいボタンの[OK]ボタンをクリックして、フォームの値をデータに保存します
新しいボタンを追加した後に「vue」と入力すると、変更ボタンをクリックした後に変更フォームに保存された「vue」を変更できます。
注：新しいform.xzと変更されたform.xzは同じxzを使用できるため、データの値を過去のformxgに割り当てることができます。
formxg.xzdate=form.zxdateの簡単な理解
注：フォームの値を新しいボタンのフォームに保存する場合は、オブジェクトをコピーするためのコードを、[OK]をクリックするたびに処理される関数に追加する必要があります。
新しいボタンフォームの値を変更する場合は、コピーしたオブジェクトのコードを「変更」をクリックする機能に追加する必要があります。クリックして変更すると、新しいフォームの値がの値に割り当てられます。変更されたフォーム。
上記のように、値が取得されているかどうかを印刷する場合。this.formxgまたはthis.dataをこのポインティングなしでログに記録して印刷できます。定義されていないというエラーが報告されます。
<template>
<div>
<br />
<el-button type="warning" plain @click="addClick">新增2</el-button>
<el-button type="warning" plain @click="changeClick">修改</el-button>
<!-- 弹出新增 -->
<el-dialog
title="新增设备信息"
:visible.sync="dialogFormVisible"
width="30%"
@close="closexz"
>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="设备编号" prop="xzdate">
<el-input v-model.trim="form.xzdate" placeholder="请输入设备编号">
</el-input>
</el-form-item>
<el-form-item label="设备描述" prop="xzsec">
<el-input
v-model.trim="form.xzsec"
type="textarea"
:rows="3"
placeholder="请输入设备描述"
></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm('form')"> 确定</el-button>
<el-button @click="cancelxz">取 消</el-button>
</el-dialog>
<!-- 弹出修改 -->
<el-dialog
title="修改设备信息"
:visible.sync="dialogFormChange"
width="30%"
@close="closexz"
>
<el-form ref="formxg" :model="formxg" :rules="rules">
<el-form-item label="设备编号" prop="xzdate">
<el-input v-model.trim="formxg.xzdate" placeholder="请输入设备编号">
</el-input>
</el-form-item>
<el-form-item label="设备描述" prop="xzsec">
<el-input
v-model.trim="formxg.xzsec"
type="textarea"
:rows="3"
placeholder="请输入设备描述"
></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="changeForm('formxg')"> 确定</el-button>
<el-button @click="cancelxz">取 消</el-button>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
//弹出新增表单
form: {
xzdate: "1",
xzsec: "2",
},
//修改 表单
formxg: {
xgdate: "",
xgsec: "",
},
data: {},
rules: {
xzdate: [
{
required: true, //是否必填
message: "不能为空", //规则
trigger: "blur", //何事件触发
},
{
min: 1,
max: 10,
message: "长度在1到10个字符",
},
],
xzsec: [
{
required: true, //是否必填
message: "不能为空", //规则
trigger: "blur", //何事件触发
},
],
},
//设置的弹出新增窗口
dialogFormVisible: false,
dialogFormChange: false,
};
},
methods: {
//1.新增一个 修改按钮
//2.点击新增弹出框 的确定按钮 把 新增表单里 的值 保存 到 data中
//3.关闭新增 清空数据
// 点击修改按钮
// 1. 取值
// 2. 赋值
// 3. 显示
//4.把数据 赋值到 修改的表单里
//5. 修改数据的值 并确定
// 新增
addClick() {
//复制两份form
// this.formxg = this.form; 如果关闭表单则保留上次输入的数据
this.form = {};
this.dialogFormVisible = true;
},
//修改
changeClick() {
// 在点修改按钮的时候 把data里的值赋值到修改的表单里
this.formxg = Object.assign({}, this.data);
console.log(this.formxg, "this.formxg");
this.dialogFormChange = true;
},
//新增 确定按钮
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.data = Object.assign({}, this.form);
alert("新增成功!");
this.dialogFormVisible = false;
} else {
console.log("error submit!!");
return false;
}
});
},
//修改 确定按钮
changeForm() {
this.$refs[formxg].validate((valid) => {
if (valid) {
console.log(this.form, "this.form"); //是否拿到新增表单输入的值
this.dialogFormChange = false;
alert("修改成功!");
} else {
console.log("error submit!!");
return false;
}
});
},
//取消
cancelxz() {
this.dialogFormVisible = false;
this.$refs.form.resetFields(); //移除校验结果并重置字段值
this.form = {};
},
//Dialog 弹窗关闭的回调
closexz() {
this.$refs.form.resetFields(); //移除校验结果并重置字段值
console.log(this.form, "this.form");
console.log(this.data, "this.data");
},
},
};
</script>
<style>
</style>