`

vue element ui form表单多个Input框 点击enter实现搜索

    博客分类:
  • Vue
 
阅读更多
<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('.', '')
}
分享到:
评论

相关推荐

    vue element el-form多表单验证.txt

    而在使用 Vue.js 搭配 Element UI 进行开发时,我们经常会遇到需要对多个表单进行同时验证的需求。本文将详细介绍如何通过 Promise 的方法实现 Vue Element UI 中的多表单验证。 #### 一、Vue Element UI 表单验证...

    Vue Element UI 完整版前端框架

    这个"Vue Element UI 完整版前端框架"提供了完整的源码,意味着你可以深入理解每个组件的工作原理,并根据项目需求进行自定义。 Vue.js 的核心特性包括: 1. **响应式数据绑定**:Vue 使用声明式的数据绑定,使得...

    Vue+Element实现动态生成新表单并添加验证功能

    在Vue.js框架中与Element UI组件库结合实现动态表单生成以及表单验证是一个相当实用的技术应用场景。本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成,并为这些动态生成的表单添加了验证功能。 知识...

    基于Vue的Element UI表单设计及代码生成器设计源码

    本项目是基于Vue的Element UI表单设计及代码生成器设计源码,包含179个文件,其中120个JavaScript文件,21个SVG文件,15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案,使用户能够快速...

    vue+element 模态框表格形式的可编辑表单实现

    在本例中,我们将探讨如何利用Vue和Element UI来实现一个模态框内的表格形式的可编辑表单。 首先,模态框(Modal)是Element UI中的一个组件,它通常用于展示临时信息或者进行一些操作确认。通过`:visible.sync`...

    基于elementui的form表单实现的一个高拓展性的表格布局组件

    首先,Element UI的Form组件提供了强大的表单处理能力,它支持各种表单元素如Input、Select、Checkbox、Radio等,并且具有表单验证功能,能够方便地实现动态表单和自定义验证规则。要创建一个高拓展性的表格布局组件...

    Vue ~ element-ui 动态表单验证,支持添加和删除操作

    总之,“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能,结合动态表单和验证规则,实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术,开发者可以更高效地处理各种表单...

    vue+element-ui实现穿梭框数据自定义排序

    在本文中,我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框(Transfer)数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库,其中包括了穿梭框组件,它常用于在两个列表之间进行数据的...

    vue复杂的form表单封装和使用

    1、该组件封装了表单中的输入框、密码框、文本域、下拉框、单选、多选、日期、文件上传、按钮等元素;...5、经过多个项目使用,功能稳定; 6、减少代码量,方便维护; 7、遇到使用问题可以随时帮助解答。

    vue获取form表单的值示例

    本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...

    vue+Element-UI 前端框架

    在“vue+Element-UI”这个项目中,Vue.js 被用来作为基础框架,Element-UI 则是基于 Vue 的一套成熟的UI组件库,提供了丰富的界面元素和交互设计,使得开发者可以快速搭建企业级的后台管理系统。 1. **Vue.js**:...

    vue Element ui实现table列拖动效果

    Vue.js 是一款非常流行的前端框架,它以其轻量级、高效和易用性著称。Element UI 是基于 Vue 的一套组件...通过以上的实现方式,你可以在 Vue 和 Element UI 项目中轻松地创建一个支持列拖动的表格,提升用户交互体验。

    vue+element实现sku表格

    在本文中,我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU(Stock Keeping Unit)表格。Vue.js是一个轻量级、高性能的前端开发框架,而Element UI则是一套为开发者、设计师和产品经理...

    基于node+vue+element ui的websocket在线客服系统(简单实现)

    在这个基于Node.js、Vue.js以及Element UI的项目中,我们看到了一个大学生课程设计的实例,展示了如何利用这些技术来构建一个简单的在线客服系统。 首先,让我们详细了解一下WebSocket。WebSocket是HTML5引入的一种...

    基于vue + element UI 的后台管理系统模板

    这个模板使用了Vue和Element UI,为开发者提供了现成的界面元素和布局,减少了从零开始编写代码的工作量。 【主要功能组件】 1. **登录页**:提供用户认证的界面,通常包括用户名、密码输入框以及登录按钮,可能还...

    基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面

    基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件(radio,select,checkbox)提供选择后触发...

    VUE.js+element-ui实现JSON编辑器

    Vue.js和Element-UI是现代前端开发中常用的两个框架,Vue.js作为一个轻量级的JavaScript框架,以其易学易用、高效和灵活的特点受到了广大开发者喜爱。而Element-UI则是一套基于Vue.js的组件库,提供了丰富的UI组件,...

    基于Vue+element UI 的手动创建地区json的三级联动

    在本文中,我们将深入探讨如何基于Vue.js框架和Element UI库实现一个地区三级联动的功能。首先,我们需要了解Vue.js和Element UI的基本概念,以及axios在其中的作用。 Vue.js 是一个轻量级的前端JavaScript框架,它...

    基于Vue和Element UI的动态表单组件设计源码

    基于Vue和Element UI的动态表单组件设计源码,该项目包含217个文件,主要文件类型有95个Vue前端文件,78个JavaScript文件,10个json配置文件,6个gif动画文件,5个Markdown文档,5个HTML页面文件,4个CSS样式文件,3...

Global site tag (gtag.js) - Google Analytics