在使用 Vue 3 + Element Plus 開發后臺系統時，我們常常會通過 搭配 實現搜索功能。然而，你是否遇到過這樣一個問題：

明明用戶在輸入框輸入內容后按下回車鍵，本意是想執行搜索操作，但頁面卻整體刷新了，數據丟失，交互體驗極差。

原因分析

HTML 原生 元素在提交時，會觸發 submit 事件，并默認刷新頁面。
Element Plus 的 實際上是基于原生 實現的，因此也會繼承這一行為。
所以：

• 如果你沒有阻止表單提交的默認行為；

• 又剛好在輸入框中按下了 Enter；

• 那么瀏覽器就會提交表單并刷新頁面！

解決方案

方法一：阻止默認行為 @submit.prevent

<el-formref="queryFormRef":model="queryParams":inline="true"label-width="120px"@submit.prevent
>

這段代碼的作用是：當 form 被提交時，阻止默認刷新頁面的行為。

方法二：只監聽回車并觸發搜索

如果你希望回車時就直接觸發搜索，也可以在輸入框上監聽 @keyup.enter：

<el-inputv-model="queryParams.productName"placeholder="請輸入產品名稱"clearable@keyup.enter="handleQuery"
/>

該方式適合在頁面中沒有 的時候單獨控制行為。

注意事項：
即使你使用了 @keyup.enter，如果仍在 中而未阻止默認提交行為，頁面仍然會刷新！所以：

@keyup.enter 負責觸發搜索  
@submit.prevent 負責阻止刷新

兩者結合使用效果最佳。

最終推薦寫法如下：

<el-formref="queryFormRef":model="queryParams":inline="true"label-width="120px"@submit.prevent
><el-form-item label="產品名稱" prop="productName"><el-inputv-model="queryParams.productName"placeholder="請輸入產品名稱"clearable@keyup.enter="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button><el-button icon="Refresh" @click="resetQuery">重置</el-button></el-form-item>
</el-form>