1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui中el-input搜索框无法回车搜索 而是刷新页面问题的解决方法

element-ui中el-input搜索框无法回车搜索 而是刷新页面问题的解决方法

时间:2021-03-31 03:13:27

相关推荐

element-ui中el-input搜索框无法回车搜索 而是刷新页面问题的解决方法

用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>

然后就实现啦

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。