问题细化一下是这样的:
比如我有一个用来修改数据的表单,第一条数据是{name: 'Xixi', age: 12},打开表单后就有两个输入框分别填的是Xixi和12,此时我修改Xixi为Haha,调用this.$refs[].resetFields()后,该表单数据恢复为Xixi和12,这是没问题的。
现在我要修改第二条数据{name: 'Dog', age: 4},打开表单后将Dog修改为Cat,此时我再次调用this.$refs[].resetFields(),表单数据理想情况应该被重置为{name: 'Dog', age: 4},可是实际上会变成第一次传入的数据{name: 'Xixi', age: 12},而理想的重置应该是重置为表单打开后的数据,无论是第几次被打开。

也就是说:
对于增操作,这个resetFields()是有效的,因为每次重置的值都是空。
对于改操作,因为每条数据不同,每次重置需要回到的值不同,但是resetFields()只认第一次打开表单后接收到的数据,这个功能就没用了。

解决办法:
现在我的解决办法是,利用v-if的特性,进行form的销毁和重建,强行让每一次改操作拿到的数据为传说中的初始值。

  1. <el-dialog :visible.sync="dialogFormVisible" :modal='dialogModalDisable' >
  2. <template v-if="!isEdit">
  3. <el-form :model="form" status-icon :rules="rules" ref="form" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
  4. <el-form-item label="用户名" prop="username" >
  5. <el-input type="text" v-model="form.username" autocomplete="off" ></el-input>
  6. </el-form-item>
  7. <el-form-item label="密码" prop="password">
  8. <el-input type="password" v-model="form.password" autocomplete="off" ></el-input>
  9. </el-form-item>
  10. <el-form-item label="超级管理员密码" prop="superpassword">
  11. <el-input type="password" v-model="form.superpassword" autocomplete="off" ></el-input>
  12. </el-form-item>
  13. <el-form-item label="核心交换机ID" prop="switch_id" required message="请输入密码">
  14. <el-select v-model="form.switch_id" placeholder="请选择核心交换机ID">
  15. <el-option
  16. v-for="item in switch_group"
  17. :key="item.id"
  18. :label="item.switch_ipaddr"
  19. :value="item.id">
  20. <span style="float: left">{{ item.switch_ipaddr }}</span>
  21. <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
  22. </el-option>
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item label="状态" prop="is_enabled">
  26. <el-switch
  27. v-model="form.is_enabled"
  28. active-color="#13ce66"
  29. inactive-color="#ff4949">
  30. </el-switch>
  31. </el-form-item>
  32. <el-form-item label="备注" prop="comments">
  33. <el-input type="text" v-model="form.comments" autocomplete="off" ></el-input>
  34. </el-form-item>
  35. </el-form>
  36. <div slot="footer" class="dialog-footer">
  37. <el-button type="primary" @click="submitForm('form')">提交</el-button>
  38. <el-button @click="resetForm('form')">重置</el-button>
  39. </div>
  40. </template>
  41. <template v-else >
  42. <el-form :model="editform" status-icon :rules="rules" ref="editform" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
  43. <el-form-item label="ID" prop="editID" >
  44. <span>{{editform.editID}}</span>
  45. </el-form-item>
  46. <el-form-item label="用户名" prop="username" >
  47. <el-input type="text" v-model="editform.username" autocomplete="off" ></el-input>
  48. </el-form-item>
  49. <el-form-item label="密码" prop="password">
  50. <el-input type="password" v-model="editform.password" autocomplete="off" ></el-input>
  51. </el-form-item>
  52. <el-form-item label="超级管理员密码" prop="superpassword">
  53. <el-input type="password" v-model="editform.superpassword" autocomplete="off" ></el-input>
  54. </el-form-item>
  55. <el-form-item label="核心交换机ID" prop="switch_id" >
  56. <el-select v-model="editform.switch_id" placeholder="请选择核心交换机ID">
  57. <el-option
  58. v-for="item in switch_group"
  59. :key="item.id"
  60. :label="item.switch_ipaddr"
  61. :value="item.id">
  62. <span style="float: left">{{ item.switch_ipaddr }}</span>
  63. <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
  64. </el-option>
  65. </el-select>
  66. </el-form-item>
  67. <el-form-item label="状态" prop="is_enabled">
  68. <el-switch
  69. v-model="editform.is_enabled"
  70. active-color="#13ce66"
  71. inactive-color="#ff4949">
  72. </el-switch>
  73. </el-form-item>
  74. <el-form-item label="备注" prop="comments">
  75. <el-input type="text" v-model="editform.comments" autocomplete="off" ></el-input>
  76. </el-form-item>
  77. </el-form>
  78. <div slot="footer" class="dialog-footer">
  79. <el-button type="primary" @click="submitForm('editform')">提交</el-button>
  80. <el-button @click="resetForm1('editform')">重置</el-button>
  81. </div>
  82. </template>
  83.  
  84. </el-dialog>

  

element-UI 多表单重置的时候的坑的更多相关文章

  1. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  2. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  3. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  4. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  5. form表单重置、清空方法记录

    myform 是form的id属性值 1.调用reset()方法 function fomrReset() { document.getElementById("myform"). ...

  6. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  7. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  8. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  9. jquery表单重置另一种方法

    页面中按钮为<a>标签时,点击取消按钮,表单内容重置,需要给form表单id="form": <a class="demo_one1" onc ...

随机推荐

  1. [UOJ388]配对树

    题解 贪心+线段树 首先如果我们知道了哪些点是关键点应该怎么搞 显然最小的匹配方案所有的边至多被经过一次 可以考虑每条边的贡献 因为我们要贡献尽量小 所以我们尽量让每条边经过的人尽量少 那么每条边被经 ...

  2. [POJ1741] Tree【树分治 点分治】

    传送门:http://poj.org/problem?id=1741 写的第一道树分治题,撒花纪念~ 对于每一对点对(i, j),它有三种情况: ① 其中一个是根节点.这种情况比较简单,直接加上就好了 ...

  3. 题解报告:hdu 4704 Sum(扩展欧拉定理)

    Problem Description Sample Input 2 Sample Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input ...

  4. 题解报告:hdu 1075 What Are You Talking About

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1075 Problem Description Ignatius is so lucky that he ...

  5. 题解报告:hdu 1421 搬寝室(递推dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1421 Problem Description 搬寝室是很累的,xhd深有体会.时间追述2006年7月9 ...

  6. 设置当前导航栏(navigationController)的标题

    一般在有导航navigationController的情况下,要设置页面的标题很简单 self.title = @"测试"; 也可以 self.navigationItem.tit ...

  7. 科普 eclipse中的Java build

    在刚学eclipse的时候,build path是经常会用到的,但经常就是跟着教程走,额就不太懂这是干嘛的,然后今天看见极客视频里有相关的讲解,来记录一下. Build Path 是指定Java工程所 ...

  8. Atcoder B - Boxes 玄学 + 数学

    http://agc010.contest.atcoder.jp/tasks/agc010_b 预处理出每两个相邻的数的差值,那么首先知道是一共取了sum / ((1 + n) * n / 2)次,因 ...

  9. AJPFX分析int 和integer的区别

    int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为int提供的封装类.int的默认值为0,而Integer的默认值为null,即Integer可 ...

  10. JavaScript实现JQuery的功能