问题场景

表单中的重置按钮,调用了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. 留存: struts2+jquery+json集成

    原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...

  2. 03- 基本的SQL语句介绍

    01 库的操作新增库create database db1 charset utf8; # 由于在my.ini中已经配置了字符集,所以,charset utf8可以不写 查库# 查看当前创建的数据库s ...

  3. Windows下OSGEarth的编译过程

    目录 1. 依赖 1) OpenSceneGraph 2) GDAL 3) CURL 4) GEOS 5) 其他 2. 编译 1) 设置参数 2) 配置路径 3) 生成编译 3. 参考文献 1. 依赖 ...

  4. abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图(七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  5. 浅入深出Vue:事件处理

    上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...

  6. Windows上安装PyV8

    Windows上安装PyV8 在PyPi网站上有Windows的exe格式的包连接, PyPi, Google注意网络是否通畅! 官网地址 Google PyV8 双击安装, 注意, 一般会自动检测P ...

  7. 浅说——树形DP

    啊!DP! 顾名思义,树形DP就是在树上所做的动态规划.我们一般所做的动态规划多是线性的,线性DP我们可以从前向后或从后向前两种方法,不妨类比一下,在树上我们同样可以有两种方法,从根向树叶或者从树叶向 ...

  8. 02(c)多元无约束优化问题-牛顿法

    此部分内容接<02(a)多元无约束优化问题>! 第二类:牛顿法(Newton method) \[f({{\mathbf{x}}_{k}}+\mathbf{\delta })\text{ ...

  9. 工具资源系列之给 windows 虚拟机装个 mac

    众说周知,Mac 很好但也很贵,对一般大众而言,漂亮简洁高颜值,对软件开发者而言,方便省心有点贵. 好到什么程度? 内置大量常用的开发工具,省去了初学者安装配置环境的麻烦,版本控制工具 svn 默认已 ...

  10. c++ 广度优先搜索(宽搜)

    c++ bfs基本应用 Knight Moves 题目描述 贝茜和她的表妹在玩一个简化版的国际象棋.棋盘如图所示: 贝茜和表妹各有一颗棋子.棋子每次移一步,且棋子只能往如图所示的八个方向移动.比赛的规 ...