`
- 浏览:
609197 次
- 性别:
- 来自:
上海
-
vue element ui form表单多个Input框 点击enter实现搜索
<el-form label-width="155px" :model="listQuery" ref="searchForm" @keyup.enter.native="handleFilter">
<el-form-item :label="$t('forms.name') + ':'" prop="name">
<el-input v-model="listQuery.name" :placeholder="$t('biomaterial.common.phprefix')+$t('forms.name')" @keyup.native="handleInput"></el-input>
</el-form-item>
<el-form-item :label="$t('forms.label') + ':'" prop="label">
<el-input v-model="listQuery.label" :placeholder="$t('biomaterial.common.phprefix')+$t('forms.label')"></el-input>
</el-form-item>
<el-form-item class="btn-line">
<el-button type="primary" @click="handleFilter">{{$t('btn.search')}}</el-button>
<el-button @click="resetForm('searchForm')">{{$t('btn.reset')}}</el-button>
</el-form-item>
</el-form>
假如限制文本框 name 不能输入数字和小数点,等等,就针对某个文本框加keyup.native事件,整个表单如果文本框 想点击Enter键实现搜索给表单加keyup.enter.native事件
(如果form只有一个Input文本框,使用keyup.enter.native事件,会出现页面刷新,请参考上篇文章解决链接:http://lanyan-lan.iteye.com/admin/blogs/2434252)
// 验证只能输入正整数
handleInput() {
this.form.subjectId = this.form.subjectId.replace(/[^\.\d]/g, '')
this.form.subjectId = this.form.subjectId.replace('.', '')
}
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
Element UI 完整版 源码 可用 vue+Element-UI 前端框架
在使用element-ui,想要多个表单同时验证时,可以使用promise的方法进行异步验证取得结果后再进行操作
vue+element-ui实现穿梭框数据自定义排序 实现了穿梭框右侧数据自定义排序的功能
1、该组件封装了表单中的输入框、密码框、文本域、下拉框、单选、多选、日期、文件上传、按钮等元素;...5、经过多个项目使用,功能稳定; 6、减少代码量,方便维护; 7、遇到使用问题可以随时帮助解答。
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件(radio,select,checkbox)提供选择后触发...
主要介绍了Vue+Element实现动态生成新表单并添加验证功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
主要介绍了vue+element 模态框表格形式的可编辑表单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
基于element-ui 的form表单实现的一个高拓展性的表格布局组件,能够用于日常使用表单的布局实现。
基于Vue+element ui+axios的三级联动,手动创建静态的json文件,axios获取json文件,并获取数据
基于node+vue+element ui的websocket在线客服系统(简单实现) 大学生课程设计 基于websocket的课程设计 自己大二写的课程设计
基于Vue和Element UI的动态表单组件设计源码,该项目包含217个文件,主要文件类型有95个Vue前端文件,78个JavaScript文件,10个json配置文件,6个gif动画文件,5个Markdown文档,5个HTML页面文件,4个CSS样式文件,3...
本项目是基于Vue的Element UI表单设计及代码生成器设计源码,包含179个文件,其中120个JavaScript文件,21个SVG文件,15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案,使用户能够快速...
1.附件内的源码是,是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
基于Vue的可视化表单设计器,让表单开发简单而高效;高级版本目前已支持 Vue3。MakingForm 表单设计器(基于可视化操作快速设计出表单页面)。GenerateForm 表单生成器(根据设计器中获取的配置 json 数据,快速渲染...
基于vue + element UI,实现登录页,系统主框架,动态路由的后台管理系统模板
今天小编就为大家分享一篇vue获取form表单的值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
基于vue element-ui的登录注册页面源码.rar
使用vue.js和element-ui实现的网页版的JSON编辑器,使用之前需要安装NODE.js和npm
关于《Vue-Element UI集成ECharts实现数据统计分析页》文章的具体代码实现。(如果帮助到你,感谢关注点赞)