项目中经常会遇到 回显当前行数据以供用户查看和编辑，很多时候编辑了数据但点击了 取消编辑，之前修改的数据全不算数，但已经修改了 模型数据，这个时候要 还原旧数据该怎么办？ 深拷贝解决~
一、情景还原
点击详情出现详情页
点击编辑，对旧数据进行编辑
点击确定发送请求，修改数据库数据，点击取消编辑还原旧数据
二、实现思路
绑定的模型数据
data() { return { dialogVisible: false, // dialog隐藏与显示 form: { input: "11111" }, // 需要回显的数据 | 旧数据 inputcopy: {}, // 深拷贝旧数据 disabled: true,// 编辑与取消编辑 | input 禁用状态 }; },
template
通过三维运算符和绑定模型数据disabled实现切换编辑与取消编辑，注意：input输入框禁用状态也是绑定模型数据disabled，以达到同步效果
<template> <div class="test"> <el-button plain @click="dialogVisible = true">详情</el-button> <el-dialog title="旧数据回显" :visible.sync="dialogVisible" width="30%"> 名称： <el-input v-model="form.input" placeholder="请输入内容" style="width: 200px" :disabled="disabled" ></el-input> <span slot="footer" class="dialog-footer"> <el-button @click="editFn($event)"> {{ disabled == false ? "取消编辑" : "编辑" }}</el-button > <el-button type="primary" @click="submitFn()" >确 定</el-button > </span> </el-dialog> </div> </template>
调用的方法
逻辑上：点击编辑模型数据变为false，可以对input输入框进行编辑，使用深拷贝把旧数据拷贝为inputcopy一下存起来>>>修改完数据后>>>用户点击确定，请求接口，修改数据库数据>>>用户没有点击确定而是取消编辑，把拷贝好的inputcopy重新赋值给原模型input，数据也就还原了
这里深拷贝我用的是Object.assign()，详细的看这里：Vue：Object.assign()的使用与深拷贝
methods: { submitFn(){ this.dialogVisible = false // 请求接口... }, editFn(e) { this.disabled = !this.disabled; if (e.target.innerText === "编辑") { this.inputcopy = Object.assign({}, this.form); // 原数据 // ... } else { // 取消编辑，还原数据 this.form = this.inputcopy; this.$set(this.form, this.inputcopy); // 更新模型数据 // ... } }, },
三、完整代码
<template> <div class="test"> <el-button plain @click="dialogVisible = true">详情</el-button> <el-dialog title="旧数据回显" :visible.sync="dialogVisible" width="30%"> 名称： <el-input v-model="form.input" placeholder="请输入内容" style="width: 200px" :disabled="disabled" ></el-input> <span slot="footer" class="dialog-footer"> <el-button @click="editFn($event)"> {{ disabled == false ? "取消编辑" : "编辑" }}</el-button > <el-button type="primary" @click="submitFn()" >确 定</el-button > </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, // dialog隐藏与显示 form: { input: "11111" }, // 需要回显的数据 | 旧数据 inputcopy: {}, // 深拷贝旧数据 disabled: true,// 编辑与取消编辑 | input 禁用状态 }; }, methods: { submitFn(){ this.dialogVisible = false // 请求接口... }, editFn(e) { this.disabled = !this.disabled; if (e.target.innerText === "编辑") { this.inputcopy = Object.assign({}, this.form); // 原数据 // ... } else { // 取消编辑，还原数据 this.form = this.inputcopy; this.$set(this.form, this.inputcopy); // 更新模型数据 // ... } }, }, }; </script> <style lang="scss" scoped></style>
下班~
