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

yuqiuyao 2018-11-23

<el-formlabel-width="155px":model="listQuery"ref="searchForm"@keyup.enter.native="handleFilter">

<el-form-item:label="$t('forms.name')+':'"prop="name">

<el-inputv-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-inputv-model="listQuery.label":placeholder="$t('biomaterial.common.phprefix')+$t('forms.label')"></el-input>

</el-form-item>

<el-form-itemclass="btn-line">

<el-buttontype="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('.','')

}

相关推荐