由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. 记录--妙用computed拦截v-model,面试管都夸我细

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何避免写出屎山,优雅的封装组件,在面试官面前大大加分,从这篇文章开始! 保持单向数据流 大家都知道vue是单项数据流的,子组件不能直接修 ...

  2. 那位拿了多个Offer的大佬分享了最新Go面经

    和大家分享一下我们 Go就业训练营 和 升职加薪星球 中战友们投稿的真实面经. 这是第一篇,计划还会再更新4篇最新Go面经,都是拿到Offer的那种! 欢迎大家关注我的账号,关注之后不迷路. 先秀战绩 ...

  3. RelationNet++:基于Transformer融合多种检测目标的表示方式 | NeurIPS 2020

    论文提出了基于注意力的BVR模块,能够融合预测框.中心点和角点三种目标表示方式,并且能够无缝地嵌入到各种目标检测算法中,带来不错的收益   来源:晓飞的算法工程笔记 公众号 论文: RelationN ...

  4. KingbaseES Json 系列五--Json数据操作函数三

    KingbaseES Json 系列五:Json数据操作函数三(JSONB_SET,JSONB_INSERT,JSON_QUERY) JSON 数据类型是用来存储 JSON(JavaScript Ob ...

  5. 福州大学MEM 备考总结

    自己的基本情况 2022年8月2日,当天觉得休息的差不多了,思来想去,觉得考研是个不错的选择,和女朋友聊了一下,得到她的支持,于是乎定下目标.接着就是开始在网络上查找相关的材料,先把要报考高校和专业的 ...

  6. 为什么js项目中金额强烈推荐使用分而不是元

    相信我们都已经知道在js中浮点数据精度的问题了 看下面的例子 0.1 + 0.2 0.30000000000000004 如何解决呢? 在前后端交互过程中统一使用分为单位进行通讯,在最后的表示层处理为 ...

  7. 如在 Java 中分割 Excel 工作表

    前言 在Excel中创建的大多数商业报告不是单页的文档,而是包含了多个上下文相关的信息,这些信息被存储在多个工作表中.例如我们的一些地区销售报告.按部门分类的员工记录.每家店铺的库存清单等. 然而,随 ...

  8. HashSet 存对象的时候是如何判断是不是同一个对象,其中含有重写equals方法和hashcode方法 后续

    一开始,set集合里面只存进一个对象, 存第二个对象时候,由于重写了hashcode方法,只要价格都是10就返回1,所以hashcode一样的话,再去进行equals方法判断,此时这个也重写了,thi ...

  9. Manacher小记

    目录 前言 洛谷 3805[模板]manacher算法 题目 分析 代码 洛谷 4555 最长双回文串 题目 分析 代码 洛谷 1659 拉拉队排练 题目 分析 代码 前言 皆移植于原csdn博客,略 ...

  10. 使用OHOS SDK构建bullet

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/bulletphysic ...