element el-table resetfields() 不生效

2023-11-05 09:32

本文主要是介绍element el-table resetfields() 不生效,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

element el-table resetfields() 不生效

问题场景

表单中的重置按钮,调用了resetfields() 方法,不生效

问题原因

结合文档对照后,发现是没有为el-form-item设置prop字段

总结

想让resetfields()生效有2个前提:

  • form要设置ref,且ref值要与 this.$refs[formName].resetFields()中的foemName一致
  • el-form-item上设置prop字段,表单rule验证和resetfields() 清理的都是prop绑定的字段

注:this.$refs[formName].resetFields()只是将查询条件初始化,所以在初始化时绑定什么值就还是什么值,并不是全部置为空。

复制代码

 <el-form label-position="right" label-width="100px" ref="formList" :model="formList"><el-col :span='8'><el-form-item label="输入搜索" prop="inputSearch"><el-inputplaceholder='输入关键字'prefix-icon='el-icon-search'v-model='formList.inputSearch'style="width: 100%;" clearable></el-input></el-form-item></el-col><el-col :span='8'><el-form-item label="日期" prop="endDate"><el-date-pickerv-model="formList.endDate"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"style="width: 100%;":picker-options='pickerOptions'></el-date-picker></el-form-item></el-col><el-col :span='8'><el-form-item label="是否选择" prop="isUpToDate"><el-select v-model='formList.isUpToDate' placeholder='是否选择' style="width: 100%;"><el-optionv-for='select in selects':key='select.value':label='select.label':value='select.value'></el-option></el-select></el-form-item></el-col><el-col :span='8'><el-form-item><el-button @click="resetForm('formList')">重置</el-button><el-button @click="queryData">查询</el-button></el-form-item></el-col>
</el-form>

复制代码

 

复制代码

 data () {return {formList: {inputSearch: '',                   endDate: '',isUpToDate: ''                     }};},methods: {resetForm (formName) {this.$refs[formName].resetFields();}
}

 

mounted() {if (this.prop) {this.dispatch('ElForm', 'el.form.addField', [this]);let initialValue = this.fieldValue;if (Array.isArray(initialValue)) {initialValue = [].concat(initialValue);}Object.defineProperty(this, 'initialValue', {value: initialValue});this.addValidateEvents();}},

 

这篇关于element el-table resetfields() 不生效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/348948

相关文章

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

通过Ajax请求后台数据,返回JSONArray(JsonObject),页面(Jquery)以table的形式展示

点击“会商人员情况表”,弹出层,显示一个表格,如下图: 利用Ajax和Jquery和JSONArray和JsonObject来实现: 代码如下: 在hspersons.html中: <!DOCTYPE html><html><head><meta charset="UTF-8"><title>会商人员情况表</title><script type="text/javasc