`

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('.', '')
}
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics