element-ui表单重置函数 resetFields 无效解决
由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 无效解决的更多相关文章
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- vue踩坑:vue+ element ui 表单验证有值但验证失败。
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...
- Element Form表单实践(上)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- Element Form表单实践(下)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...
- UI表单
Monk.UI表单美化插件诞生记! 阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...
- php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)
/** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($e ...
- dwz框架---(2)表单回调函数
dwz中的表单回调函数大概有下面几种: /** * 普通ajax表单提交 * @param {Object} form * @param {Object} callback * @param {Str ...
随机推荐
- 「AntV」路网数据获取与L7可视化
1. 引言 L7 地理空间数据可视分析引擎是一种基于 WebGL 技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用.L7 引擎支持多种数据源和数据格式,包括 GeoJSON.CSV ...
- 记录--20行js就能实现逐字显示效果???-打字机效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 效果演示 横版 竖版 思路分析 可以看到文字是一段一段的并且独占一行,使用段落标签p表示一行 一段文字内,字是一个一个显示的,所以这里每一 ...
- 记录--vue中封装一个右键菜单组件(复制粘贴即可使用)
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 组件介绍 关于web端的右键功能常用的地方有表格的右键,或者tab标签的右键等,本文记录一下封装一个右键菜单组件的思路步骤代码. 程序员除 ...
- WPF 模仿微信顶部断网提示气泡
直接看顶部气泡的效果吧 顶部气泡主要要做三个工作 1.定位到顶部居中 2.气泡需要跟随窗体 3.气泡不可以遮挡住其他程序界面 原生的WPF Poupu控件不会跟随目标移动且在Z轴上会置顶,所以存在打开 ...
- 使用docker运行nginx服务,挂载自定义配置文件
错误命令: 下面的方式,启动容器时,-d 后面跟一个指定容器ID的参数写在前面,导致容器不能正常启动,出现异常 docker run --name testnginx -d 7f0fd59e0094 ...
- mybatis in 参数动态拼接
// 接口 List<SysUser> findByIdList(List<Integer> idList); //xml <select id="findBy ...
- TensorRT C# API 项目介绍:基于C#与TensorRT部署深度学习模型
TensorRT C# API 项目介绍:基于C#与TensorRT部署深度学习模型 1. 项目介绍 NVIDIA TensorRT 是一款用于高性能深度学习推理的 SDK,包括深度学习推理优化 ...
- #保序回归问题,单调栈,二分#洛谷 5294 [HNOI2019]序列
题目 给定一个长度为 \(n\) 的序列 \(A\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k\). 第一次修改之前及每次修改之后,都要求你找到一个同样长度为 \(n\ ...
- 部署solr服务
前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 一.Sorl单机部署 准备:solr5.5.tomcat8.5.jdk1.8 1.解压 solr-5.5.0.zip压缩包 2.复制./ ...
- 看不懂来打我,vue3如何将template编译成render函数
前言 在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件,通过那篇文章我们知道了,template编译为render函数底层就是调用了@vue ...