由element-ui文档中能看到重置表单使用的是如下函数

this.$refs[formName].resetFields();

但是有时使用它却可能会失效

解决:

form-item中要加上prop属性,它的值要与input的model对应

<el-form-item prop="roleDesc" label="描述">
<el-input v-model="addForm.roleDesc"></el-input>
</el-form-item>

所以prop属性不仅是在校验表单时要使用,在重置表单时也要加上

注:重置的方法只适用于prop中有属性的对象

data(){
return {
tag:{
tagName:'',
tagDesc:''
},
tagTwo:''
}
}
// 表单中若是重置tag是可以的,因为它有属性且对应prop
// 使用函数为tagTwo赋值tag类型的对象
// 重置tagTwo不能,它本身没有属性,赋值的对象上才有属性

element-ui Table自动滚动实现

<template>
<el-table ref="table1" :header-row-class-name="'lc_table'" :data="pageData.sbxx.data" height="290" style="width: 100%">
</template> <script>
export default {
mounted() {
this.tableScrooll(this.$refs.table1);
},
methods: {
// 入参是需要滚动table的Dom节点
tableScrooll(table) {
var tableScroollTimer;
const divData = table.bodyWrapper;
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
tableScroollTimer = setInterval(() = >{
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
// 但是输出的话可以发现scrollTop是有小数的。现在很多浏览器中scrollTop是浮点数,可以+1/-1或者取整后用不等式去判断
if (divData.scrollHeight - divData.scrollTop - 1 < divData.clientHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
},
100);
divData.addEventListener("mouseover",
function() {
clearInterval(tableScroollTimer);
});
divData.addEventListener("mouseleave",
function() {
tableScroollTimer = setInterval(() = >{
// 元素自增距离顶部1像素
divData.scrollTop += 1;
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.scrollHeight - divData.scrollTop - 1 < divData.clientHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0;
}
},
100);
});
},
}
}
</script>

element-ui表单重置函数 resetFields 无效解决的更多相关文章

  1. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  4. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  5. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  6. Element Form表单实践(下)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  7. UI表单

    Monk.UI表单美化插件诞生记!   阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...

  8. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  9. php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)

    /** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($e ...

  10. dwz框架---(2)表单回调函数

    dwz中的表单回调函数大概有下面几种: /** * 普通ajax表单提交 * @param {Object} form * @param {Object} callback * @param {Str ...

随机推荐

  1. CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释

    首先理解几个概念: (1)屏幕尺寸:屏幕对角线的长度,一般用英寸表示,1英寸=2.54cm. (2)dp((或者叫dip):设备独立像素,也就是设备屏幕上多少个点. (3)dpi:印刷行业术语,像素密 ...

  2. 《写给程序员的Python教程》阅读随笔---python禅学(Zen_of_python)

    Beautiful is better than ugly. Explicit is better than implicit. Simple is better than complex. Comp ...

  3. 5 CSS伪类选择器

    5 伪类选择器 anchor伪类:专用于控制链接的显示效果 More Actions:link a:link 选择所有未被访问的链接. :visited a:visited 选择所有已被访问的链接. ...

  4. JDK10的新特性:var和匿名类

    目录 简介 匿名类中自定义变量 lambda表达式中的匿名类 总结 简介 匿名类相信大家都用过了,学过JDK8中的lambda表达式之后,可以发现有些匿名类是可以用lambda表达式来替代的,能够被替 ...

  5. DevEco Studio 3.1 Beta1版本发布——新增六大关键特性,开发更高效

      智能代码编辑.端云一体化开发.低代码开发个性化-- 六大新增关键特性,开发更高效,体验更觉妙! 立即点击链接下载,做DevEco Studio 3.1 Beta1版本尝鲜者! 下载链接:HUAWE ...

  6. Java入门02:IDEA安装教程

    Java入门02:IDEA安装教程 下载IDEA 首先进入官网进行下载,地址:https://www.jetbrains.com/idea/download/#section=windows 我这里选 ...

  7. ImportError: Cannot load backend 'TkAgg' which requires the 'tk' interactive framework, as 'headless' is currently running

    MMdetection多卡训练常遇到的两个错误,百度无果,没解决,去github里mmdetection的issue模块搜索了一下找到正解. 这里记录一下,方便后者. 1️⃣ ImportError: ...

  8. python实现:有一个列表为num_list,找到一个具有最大和的连续子列表,返回其最大和。

    # 有一个列表为num_list,找到一个具有最大和的连续子列表,返回其最大和.# 示例:# 输入: [-3,1,-1,6,-1,2,4,-5,4]# 输出: 11# 解释: 连续子数组 [6,-1, ...

  9. ASP.NET CORE 框架揭秘读书笔记系列——命令行程序的创建(一)

    一.dotnet --info 查看本机开发环境 dotnet --info  会显示本机安装的SDK版本.运行时环境.运行时版本 二.利用命令行创建.NET项目 我们不仅可以利用脚手架模版创建各种类 ...

  10. 技术人如何"结构化"高效思考?

    1 前言 你是否在解决问题时,常常觉得脑子很乱,很多零散的信息迸发出来,但就是无法形成解决方案. 之所以这样,原因就在于,我们的大脑处理不了太多零散而复杂的信息.人类大脑在处理信息的时候,有两个规律: ...