问题细化一下是这样的:
比如我有一个用来修改数据的表单,第一条数据是{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的销毁和重建,强行让每一次改操作拿到的数据为传说中的初始值。

 <el-dialog  :visible.sync="dialogFormVisible" :modal='dialogModalDisable' >
<template v-if="!isEdit">
<el-form :model="form" status-icon :rules="rules" ref="form" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
<el-form-item label="用户名" prop="username" >
<el-input type="text" v-model="form.username" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="超级管理员密码" prop="superpassword">
<el-input type="password" v-model="form.superpassword" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="核心交换机ID" prop="switch_id" required message="请输入密码">
<el-select v-model="form.switch_id" placeholder="请选择核心交换机ID">
<el-option
v-for="item in switch_group"
:key="item.id"
:label="item.switch_ipaddr"
:value="item.id">
<span style="float: left">{{ item.switch_ipaddr }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="is_enabled">
<el-switch
v-model="form.is_enabled"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="备注" prop="comments">
<el-input type="text" v-model="form.comments" autocomplete="off" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</div>
</template>
<template v-else >
<el-form :model="editform" status-icon :rules="rules" ref="editform" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
<el-form-item label="ID" prop="editID" >
<span>{{editform.editID}}</span>
</el-form-item>
<el-form-item label="用户名" prop="username" >
<el-input type="text" v-model="editform.username" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="editform.password" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="超级管理员密码" prop="superpassword">
<el-input type="password" v-model="editform.superpassword" autocomplete="off" ></el-input>
</el-form-item>
<el-form-item label="核心交换机ID" prop="switch_id" >
<el-select v-model="editform.switch_id" placeholder="请选择核心交换机ID">
<el-option
v-for="item in switch_group"
:key="item.id"
:label="item.switch_ipaddr"
:value="item.id">
<span style="float: left">{{ item.switch_ipaddr }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="is_enabled">
<el-switch
v-model="editform.is_enabled"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="备注" prop="comments">
<el-input type="text" v-model="editform.comments" autocomplete="off" ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('editform')">提交</el-button>
<el-button @click="resetForm1('editform')">重置</el-button>
</div>
</template> </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. (8)css表格

    用css设置表格样式 *<table></table> 标签定义 HTML 表格. * tr 元素定义表格的行:th 元素定义表格的表头:td 元素定义表格中的单元格:capt ...

  2. element-ui公用模态框自定义样式与scoped样式生效问题解决方案

    //先插如效果图 里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样. //下面这个图片为初始样式 //拖动模态框指令需要插件.详情看我下一篇,以下是地址 https://www. ...

  3. css覆盖select样式并添加小箭头

    .select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...

  4. ______________从时间超限到800ms 到200ms——————2098

    分拆素数和 Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted S ...

  5. win10 SQL Server 配置管理器无法启动

    解决方法: 用管理员方式打开命令行 进入 “C:\Program Files (x86)\Microsoft SQL Server\140\Shared”,(有的是“C:/Program Files/ ...

  6. C语言之图像旋转

    最近用到了图像向左或者向右旋转90°的情况,纠结了好一会儿,写下来供大家参考. 1 向左旋转90° //unsigned char *pImgData: 输入图像指针 //int WidthIn, i ...

  7. 题解报告:hdu 2546 饭卡(01背包)

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...

  8. 为什么JAVA虚拟机分为线程共享和非线程共享?

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) , VM Stack(虚拟 ...

  9. python版本2和3使用range()函数方法

    python 2:可以直接使用range(5) 输入的列表结果和预期的一样 python 3:使用range(5) 得到列表结果却是这个,和预期的不一致,其原因是节省空间,防止过大的列表产生 如果想要 ...

  10. Cannot load php5apache2_4.dll into server 问题的解决方法

    解决方法,重新安装 VC9或 VC11 试试,或者全部安装VC9  VC11 注意:如果下载的 php5.5为32位版本, 那么安装的vc9或VC11 也必须是32位版本.           如果下 ...