问题场景

表单中的重置按钮,调用了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-input
placeholder='输入关键字'
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-picker
v-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-option
v-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();
}
}

element el-table resetfields() 不生效的更多相关文章

  1. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

  2. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  3. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  6. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  7. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  8. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  9. element ui table 导出excel表格

    https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...

随机推荐

  1. 深入解析Hyperledger Fabric启动的全过程

    在这篇文章中,使用fabric-samples/first-network中的文件进行fabric网络(solo类型的网络)启动全过程的解析.如有错误欢迎批评指正. 至于Fabric网络的搭建这里不再 ...

  2. Hadoop 学习之路(二)—— 集群资源管理器 YARN

    一.hadoop yarn 简介 Apache YARN (Yet Another Resource Negotiator) 是hadoop 2.0 引入的集群资源管理系统.用户可以将各种服务框架部署 ...

  3. Java基础知识了解

    第一章 开发前言 一.java语言概述 Java是当下最流行的一种编程语言,至今有20年历史了.Java语言之父是James Gosling. Java是Sun公司(Stanford Universi ...

  4. Git项目迁移

    代码项目迁移步骤 1.将原有项目重命名,old 2.新建一个项目,名字为原本的项目名称,new 3.使用特殊方式克隆代码 # old.git为原项目重命名后的git链接 git clone --mir ...

  5. GO代码生成代码小思小试

    推进需求 GO 项目,可整体生成一个运行文件到处跑,是极爽之事.但如果有资源文件要得带着跑,则破坏了这种体验. 例如下边这个项目结构,resource 目录下为资源文件,main.go 中会通过路径引 ...

  6. 7天入门Linux

    经过一个星期学习,Linux终于入门了,在这里小记下~ =====================分割线============================= Ubuntu常用命令: ctrl+s ...

  7. shell 循环打印某一天后的n天的日期

    #!/bin/bash start_date="2017-10-26" for i in `seq 0 30` do num=$((${i}+1)) datatime=`date ...

  8. 【名额有限】云开发AI拓展能力等你来体验!

    这次来了个超厉害的新能力! 人脸智能打马赛克.人脸智能裁剪--各种操作,都能一步到位! 迫不及待想体验,戳链接:https://wj.qq.com/s2/3986990/e0ef/ 还没有搞懂,继续往 ...

  9. 记2017沈阳ICPC

    2017沈阳ICPC 10月20日 早上十点抵达沈阳,趁着老师还没到,跑去故宫游玩了一下,玩到一点多回到宾馆,顺便吃了群里大佬说很好吃的喜家德虾饺(真的好好吃),回到宾馆后身体有点不舒服了,头晕晕的, ...

  10. MongoDB知识整理

    参考资料: 7 月全球数据库排名:MongoDB 紧追 PostgreSQL MongoDB 教程 MongoDB中文社区