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

相关文章

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

UVa 10820 Send a Table (Farey数列欧拉函数求和)

这里先说一下欧拉函数的求法 先说一下筛选素数的方法 void Get_Prime(){ /*筛选素数法*/for(int i = 0; i < N; i++) vis[i] = 1;vis[0] = vis[1] = 0;for(int i = 2; i * i < N; i++)if(vis[i]){for(int j = i * i; j < N; j += i)vis[j] =

leetcode#496. Next Greater Element I

题目 You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset of nums2. Find all the next greater numbers for nums1’s elements in the corresponding places of nums

css-table

设置table的文字不换行:给th,td添加white-space: nowrap; 设置单元格内容及其边框的距离:使用html的cellpadding属性,还有一种方式设置padding。在CSS中,table, th, td{padding:0;}效果等同于cellpadding="0″。 设置table的单元格边距:border-spacing如果定义一个 length 参数,那么定义的是水

Form 表单的 resetFields() 失效原因

假设我们有如下代码:  <template><ElForm ref="formRef" :model="formModel" :rules="rules"><!-- 表单内容 --></ElForm></template><script setup>import { ref } from 'vue';const formRef = ref(null);const formModel = ref

vue el-dialog嵌套解决无法点击问题

产生原因: 当你在 el-dialog 上嵌套另一个 el-dialog 窗口时,可能会遇到内部对话框无法点击的问题。这通常是由于嵌套对话框的遮罩层(overlay)或其他样式问题造成的。 解决方案: 如果你的 el-dialog 组件支持 append-to-body 属性,你可以将对话框附加到 body 元素上,以避免 z-index 问题。 <template><el-dialo

element-ui打包之后图标不显示,woff、ttf加载404

1、bug 起因 昨天在 vue 项目中编写 element-ui 的树形结构的表格,发现项目中无法生效,定位问题之后发现项目使用的 element-ui 的版本是 2.4.11 。看了官方最新版本是 2.15.14,然后得知 2.4.11 版本是不支持表格树形结构的。于是决定升级 element-ui 的版本,方便后续的开发。 升级之后本地简单的过了一遍系统功能,并没有发现有什么不妥,于

react antd table expandable defaultExpandAllRows 不生效问题

原因:defaultExpandAllRows只会在第一次渲染时触发 解决方案:渲染前判断table 的datasource 数据是否已准备好 {pageList.length > 0 ? (<TablerowSelection={rowSelection}columns={columns}dataSource={pageList}style={{ marginTop: 24 }}pagina

el-date-picker年份选择默认值为当前年,并且将获取时间转为年月日格式

<el-date-pickervalue-format="yyyy"v-model="leftQuery.year":disabled="timeArr && timeArr.length != 0 ? true : false"type="year"placeholder="选择年"@change=changeYear:picker-options="pickerOptions"></el-da