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

最新推荐文章于 2024-01-28 10:00:00 发布

蔡俊锋

最新推荐文章于 2024-01-28 10:00:00 发布

阅读量620

点赞数

分类专栏： vue 文章标签： vue element table form

本文链接：https://blog.csdn.net/caijunfen/article/details/79707250

版权

vue 同时被 2 个专栏收录

40 篇文章 3 订阅

订阅专栏

element

7 篇文章 0 订阅

订阅专栏

问题：

表单中的用户名和模态框中的用户名没有绑定同一个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); 
 
   }, 
 
   },