关于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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 快速解决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

  • vue form表单使用resetFields函数出现的问题

    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

  • 关于element-ui resetFields重置方法无效问题及解决

    关于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单元格合并的解决过程

    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

随机推荐