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>