由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. 如何使用 JavaScript 导入和导出 Excel

    前言 在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务.无论是数据交换.报告生成还是数据分析,与Excel文件的交互都扮演着至关重要的角色.本文小编将为大家介绍如何在熟 ...

  2. KingbaseES特殊权限介绍

    用户需求:新建一个用户B,需要能够查询A用户的所有表,并且对以后新建的表也要有select权限. 对于现有的表可以通过动态sql批量进行授权,但是未来新建的表要如何进行授权呢? 查询了帮助文档发现通过 ...

  3. MemfireCloud让静态托管页面动起来!

    静态托管 我们最常接触到的静态托管是github pages,它的常见工作模式是在github上创建一个仓库,使用hexo类的工具初始化仓库,编写markdown文件,生成静态页面,推送到github ...

  4. 理解持续测试,才算理解DevOps

    软件产品的成功与否,在很大程度上取决于对市场需求的及时把控,采用DevOps可以加快产品交付速度,改善用户体验,从而有助于保持领先于竞争对手的优势. 作为敏捷开发方法论的一种扩展,DevOps强调开发 ...

  5. 基于ArkUI框架开发-ImageKnife渲染层重构

      ImageKnife是一款图像加载缓存库,主要功能特性如下: ●支持内存缓存,使用LRUCache算法,对图片数据进行内存缓存. ●支持磁盘缓存,对于下载图片会保存一份至磁盘当中. ●支持进行图片 ...

  6. 【直播回顾】OpenHarmony 3.1 Release版本南北向关键能力解读

    OpenHarmony 3.1 Release版本发布后,广大开发者们纷纷开始上手体验新版本的功能.但随之而来的一系列问题,摆在了大家的面前:OpenHarmony 3.1这一版本,都有哪些重要的能力 ...

  7. C语言简易万年历带注释

    同学问的课后作业,顺便加了写注释. #include<stdio.h> /* * 注意 每周的第一天是星期天 */ int main() { int day_per_mo[12] = { ...

  8. [一本通1681]统计方案 题解(Meet in mid与逆元的结合)

    题目描述 小\(B\)写了一个程序,随机生成了\(n\)个正整数,分别是\(a[1]-a[n]\),他取出了其中一些数,并把它们乘起来之后模\(p\),得到了余数\(c\).但是没过多久,小\(B\) ...

  9. 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit

    1.问题描述 升级到4.0.0.59版本后,通过pushService.getToken获取华为的token时报如下错误:Illegal application identity. 解决方案 Mate ...

  10. amcap使用方法

    1.选择设备 device 里面显示的是设备,分割线上面是视频设备,分割线下面是音频设备 2.打开图像 options > Preview  勾选上就是打开视频,再次点击取消勾线就是关闭视频 3 ...