vue3和ts的el-input的键盘回车绑定事件
vue3和ts的el-input的键盘回车绑定事件
·
el-input框绑定键盘回车搜索事件 加上@keyup.enter.native="search"
<el-input v-model="key" placeholder="请输入">
<template #append>
<el-button :icon="Search" @click="getdatalist" @keyup.enter.native="search"/>
</template>
</el-input>
然后
<script setup lang="ts">
// 搜素键盘回车事件
const search=(e:any)=>{
if(e.keyCode==13){
getdatalist()
}
}
// 开启键盘监听事件
window.addEventListener('keydown', search, true)
</script>
第二种方法:作用在input元素身上
在html中
<div class="topSearch">
<el-input v-model="key" placeholder="请输入" @keyup.enter="search">
<template #append>
<el-button :icon="Search" @click="getdatalist" />
</template>
</el-input>
</div>
然后
<script setup lang="ts">
//搜索框
const key = ref('')
// 搜素键盘回车事件
const search=(e:any)=>{
if(e.keyCode==13){
getdatalist()
}
}
//获取HS编码数据列表
const getdatalist=()=>{
getHSCodelist(page.value,pageSize.value,key.value).then(res=>{
tableData.value=res.data.Items
total.value=res.data.Total
})
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)