关于element-ui resetFields重置方法无效问题及解决
目录
- element-ui resetFields重置方法无效
- 情况1.el-form-item没有加上prop属性
- 情况2.在mounted之前给表单赋值(mounted DOM未挂载完成)
- 解决办法
- element-ui表单重置函数resetFields();使用注意事项
element-ui resetFields重置方法无效
目前发现resetFields(),有以下两种情况可能会导致失效:
情况1.el-form-item没有加上prop属性
需要重置的表单项el-form-item必须要加上prop属性,并且prop属性的值必须和数据双向绑定的值最后面保持一致
element-ui 提供的文档如图:
图例如下:
情况2.在mounted之前给表单赋值(mounted DOM未挂载完成)
在mounted之前赋值会被当成是初始值,而resetFields方法是将值重置为初始值而不是清空。所以导致没有清空数据。
解决办法
法一:表单在mounted再赋值
法二:使用this.$nextTick(() => { // 这里开始赋值 this.form.xx = xx; })
element-ui表单重置函数resetFields();使用注意事项
在表单重置的时候我们习惯使用this.$refs[formName].resetFields();来重置表单,但有时候会出现重置不完全的情况,例如:
表单绑定的变量:
formData:{ id:null, name:null , age:null}
表单html:
<el-form ref="form" :model="formData" label-width="80px" size="mini"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="性别"> <el-input v-model="formData.age"></el-input> </el-form-item> </el-form>
当我们在编辑的时候会从后台返回数据回填formData(有id),
当我们使用 this.$refs[‘form’].resetFields();重置表单的时候,不能把id重置成null(因为表单html中没有引用id项,所以重置的时候不能把formData.id重置),如果要把id重置成null,这个时候就要手动重置formData.id
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue form表单使用resetFields函数出现的问题
目录 form表单使用resetFields函数的问题 resetFields失效,死活不起作用的解决 分析 解决办法 form表单使用resetFields函数的问题 今天想使用新增和删除使用一个dialog,这就涉及到点击添加按钮需要清空表单数据的问题,我第一个想到的是调用resetFields方法. 我直接写了之后是这样的 this.$refs[formName].resetFields() 结果直接报错,于是我就上网上百度了后,发现改成这样就不报错了. this.$nextTick(fu
-
Vue+Element-ui表单resetFields无法重置问题
目录 问题背景 第一个无法解决重置表单解决方案 第二个无法解决重置表单解决方案 问题背景 在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw
-
浅谈vue中resetFields()使用注意事项
this.$refs.frmAdd.resetFields();这句在使用中有些时候不会有啥问题,但有时候就会出问题,而且特别难缠,我原来这么使用就没问题啊,怎么这里就会有问题,查找各种资料总结得出: 第一种情况:放在弹框刚准备弹出的时候 第二种情况:放在弹框关闭方法@close中 发现上次报红框的地方仍然在,并未重置 最终解决方案: this.KaTeX parse error: Expected '}', got 'EOF' at end of input: - this.refs.frmA
-
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu
-
关于element-ui resetFields重置方法无效问题及解决
目录 element-ui resetFields重置方法无效 情况1.el-form-item没有加上prop属性 情况2.在mounted之前给表单赋值(mounted DOM未挂载完成) 解决办法 element-ui表单重置函数resetFields();使用注意事项 element-ui resetFields重置方法无效 目前发现resetFields(),有以下两种情况可能会导致失效: 情况1.el-form-item没有加上prop属性 需要重置的表单项el-form-item必
-
使用vue-cli导入Element UI组件的方法
首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法,希望对大家有所帮助,如果大家有任何疑
-
Element UI中table单元格合并的解决过程
目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.
-
element ui里dialog关闭后清除验证条件方法
关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl
-
vue2.0 + element UI 中 el-table 数据导出Excel的方法
1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel
-
Element UI 自定义正则表达式验证方法
如下所示: //指定数据中心的验证表单valiForm,验证规则rules <el-form :model="valiForm" :rules="rules" ref="valiForm" label-width="100px" class="demo-valiForm"> <el-form-item label="名称:" :label-width="for
-
element ui 表格动态列显示空白bug 修复方法
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c
-
vuejs+element UI table表格中实现禁用部分复选框的方法
有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
element UI upload组件上传附件格式限制方法
如下所示: <el-upload :action="uploadUrl" ref="upload" :multiple="false" :on-change="fileChange" :before-upload="beforeUpload" :on-success="handleAvatarSuccess" :on-preview="file_click" c
-
element ui table 增加筛选的方法示例
网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met
随机推荐
- PHP游戏编程25个脚本代码
- Lua面向对象编程之类的简单实现方式
- 增强的 JavaScript 的 trim 函数的代码
- php编写的简单页面跳转功能实现代码
- ThinkPHP之用户注册登录留言完整实例
- Python编程实现控制cmd命令行显示颜色的方法示例
- Android最新版本开发环境搭建图文教程
- javascript中使用new与不使用实例化对象的区别
- SQL2008中 阻止保存要求重新创建表的更改 的解决方法
- linux mysql 数据库开启外部访问设置指南
- 详谈jQuery unbind 删除绑定事件 / 移除标签方法
- 使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
- 提高IIS网站服务器效率的8个方法
- Java的Spring框架中bean的继承与内部bean的注入
- Android中EditText光标在4.0中的bug及解决方法
- 详解Python中 sys.argv[]的用法简明解释
- Python向MySQL批量插数据的实例讲解
- python射线法判断检测点是否位于区域外接矩形内
- Tensorflow加载预训练模型和保存模型的实例
- vue 路由嵌套高亮问题的解决方法