【vue】vue2 数据回显取消编辑不修改原数据

fruge365

发布于 2025-12-15 09:49:38

930

项目中经常会遇到 `回显`当前行数据以供用户查看和编辑，很多时候编辑了数据但点击了 `取消编辑`，之前修改的数据全不算数，但已经修改了 `模型数据`，这个时候要 `还原旧数据`该怎么办？ `深拷贝`解决~

一、情景还原

点击详情出现详情页

点击编辑，对旧数据进行编辑

点击确定发送请求，修改数据库数据，点击取消编辑还原旧数据

二、实现思路

绑定的模型数据

  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>

下班~

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除