怎么处理table 与 form绑定的问题(现象：点击取消后 修改的值还是在table显示)

问题：

表单中的用户名和模态框中的用户名没有绑定同一个model，但之后在模态框捏输入发现表单内的用户名也发生了改变。原本计划是想点保存之后再改变的。

解决方法

找到判断模态框是否显示的变量。之后用watch监听该属性。然后就不会发生上述问题。

表单：

<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row> <el-table-column prop="UserName" align="center" label="用户名"> </el-table-column>

模态框：

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" v-if="dialogStatus=='update'"> <el-form > <el-form-item label="用户名：" :label-width="formLabelWidth"> <el-input v-model="form.UserName" auto-complete="off"></el-input> </el-form-item>

添加watch：

watch: { dialogFormVisible: function(val, oldVal) { setTimeout(() => { this.getList();}, 100);},},