用elementUI的搜索框,发现回车搜索无效,而是刷新页面,所以我通过事例来演示一下它的问题,正常添加回车事件@keyup.enter.native后,是可以实现的,但是偶尔会发现它会无效,所以就要用另外的办法,下面通过我的事例来讲解一下。
1、事例
回车事件@keyup.enter.native
<el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人" @keyup.enter.native="onSubmit"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><script>export default {data() {return {formInline: {user: '',region: ''}}},methods: {onSubmit() {console.log('submit!');}}}</script>
但是回车有问题,按回车键就刷新页面
2、解决办法:
阻止form的默认事件,在form表单上加@submit.native.prevent
<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人" @keyup.enter.native="onSubmit"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form>
然后就实现啦