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

相关文章

解决JSONField、JsonProperty不生效的问题

《解决JSONField、JsonProperty不生效的问题》:本文主要介绍解决JSONField、JsonProperty不生效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录jsONField、JsonProperty不生效javascript问题排查总结JSONField

MySQL的ALTER TABLE命令的使用解读

《MySQL的ALTERTABLE命令的使用解读》:本文主要介绍MySQL的ALTERTABLE命令的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、查看所建表的编China编程码格式2、修改表的编码格式3、修改列队数据类型4、添加列5、修改列的位置5.1、把列

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

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