Vue修改时，撤销修改内容

￡神魔★判官ぃ 2021-09-17 00:26 712阅读 0赞

原文地址：[https://forum.vuejs.org/t/topic/37424][https_forum.vuejs.org_t_topic_37424]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70][]

时隔N久，重新整理下这个帖子。。

背景：我的基础功能是，一个table，前面是checkbox，选择某一行，点击修改按钮，弹出对话框，展示要修改的内容，如果点击"取消"则不保存内容，点击"提交"按钮，则将修改的内容通过ajax请求，提交到后台。。

\------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

在尝试了N久之后，终于将思绪理清楚，

1、将选择的某一行，转换成JSON字符串某一个变量，假如这个变量名字叫a

2、然后将a转回成对象，赋值给你对话框里展示内容的对象b

3、假如用户要修改，修改的是b，点击取消的话还是a对象，点击提交，提交的事b对象。

如果同志们还不清楚，下面上代码:

\`\`\`

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70 1][]

@selection-change="handleSelectionChange" 用于选择某一行（我这里实现的事单选功能）

handleSelectionChange(val) \{

this.selectRows = val;

\},// 讲选择的行赋值给这个变量

\`\`\`

下面是我对话框里面展示的内容，主要是讲editForm的各个属性展示出来

\`\`\`

<el-dialog title="修改算法" :visible.sync="editAnalyticsVisible" :close-on-click-modal="true" :before-close="handleClose">

<el-form ref="editForm" :model="editForm" label-width="80px" class="dialogForm" :rules="rules">

<el-form-item label="算法名称">

<el-input v-model="editForm.name"></el-input>

</el-form-item>

<el-form-item label="算法编码" prop="code">

<el-input v-model="editForm.code"></el-input>

</el-form-item>

<el-form-item label="算法作者">

<el-input v-model="editForm.author"></el-input>

</el-form-item>

<el-form-item label="算法类型">

<el-select v-model="editForm.type" placeholder="请选择">

<el-option v-for="(item,index) in type" :label="item.label" :value="item.value" :key="index">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="算法版本">

<el-input v-model="editForm.version"></el-input>

</el-form-item>

<el-form-item label="算法语言">

<el-select v-model="editForm.supportedLanguage" placeholder="请选择">

<el-option v-for="(item,index) in places" :label="item.label" :value="item.value" :key="index">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="算法分类">

<el-input v-model="editForm.taxonomyLocationName" readonly=""></el-input>

<el-button type="primary" @click.prevent="queryTaxonomyLocation();dialogType = 'edit'">选择分类</el-button>

</el-form-item>

<el-form-item label="算法描述">

<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="editForm.description">

</el-input>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="handleEditPut('editForm')" :loading="editLoading">确定</el-button>

<el-button @click="cancelEdit">取消</el-button>

</el-form-item>

</el-form>

<div>

</div>

</el-dialog>

\`\`\`

我们来看下给editform赋值的代码，

选择table里面的某一行，然后点击编辑按钮，开始赋值，并从dialog里面展示出来，

下面这段代码为，点击编辑时，进行的赋值操作

\`\`\`

handleEdit(index, row) \{

if (this.selectRowsCheck()) \{

this.editAnalyticsVisible = true;

// this.editForm = this.selectRows\[0\];

this.editRow = JSON.stringify(this.selectRows\[0\]);

this.editForm = JSON.parse(this.editRow);

\},

\`\`\`

点击取消按钮时触发的操作，恢复成原来的初始值

\`\`\`

cancelEdit() \{

this.editAnalyticsVisible = false;

this.editForm = JSON.parse(this.editRow);

\},

\`\`\`

点击提交按钮进行的操作，将修改之后的值提交给后台

\`\`\`

handleEditPut(formName) \{

this.$refs\[formName\].validate((valid) => \{

if (valid) \{

this.editLoading = true;

if (this.dialogType === "edit") \{

this.editForm.taxonomyLocationId = this.selectTaxonomyLocationId;

Put(Api.analytics, this.editForm)

.then(res => \{

if (res.success && res.code === ERR\_OK) \{

this.editLoading = false;

this.editAnalyticsVisible = false;

this.$message(\{

message: "操作成功！",

type: "success"

\});

this.queryData(this.searchParams);

\} else \{

this.editLoading = false;

this.$message(\{

message: res.msg,

type: "warning"

\});

\})

.catch(err => \{

this.editLoading = false;

console.log(err);

this.$message(\{

message: "操作失败，请联系管理员",

type: "warning"

\});

\} else \{

console.log('error submit!!');

return false;

\});

\`\`\`

原理就是同第一种方法一样，将对象转换成字符串以后，就不会进行双向绑定，

小伙伴们听懂了吗？

[https_forum.vuejs.org_t_topic_37424]: https://forum.vuejs.org/t/topic/37424
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70]: /images/20210813/6097ca2f13904011b237daffbd3062de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0g1X1F1ZWVuU3R5bGUxMg_size_16_color_FFFFFF_t_70 1]: /images/20210813/03ed79dbdf15463bb34311f1576d382b.png