Element-UI で、el-form 内の入力ボックスで Enter キーを押すとページが更新される問題が解決されました。

問題の説明:

フォームに入力ボックスがel-form1 つしかない場合、入力ボックスが選択されているときに Enter キーを押すと、ページが更新されます。el-input

<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
 :inline="true" label-width="68px">
    <el-form-item label="角色名称" prop="roleName">
        <el-input
            v-model="roleQueryParams.roleName"
            placeholder="请输入角色名称"
            clearable
            style="width: 250px"
            @keyup.enter.native="roleHandleQuery"
         />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
     </el-form-item>
</el-form>

問題分析:

デフォルトでは、el-formに入力ボックスが 1 つしかない場合、el-form入力ボックスにボタンが自動的に追加されますtype="submit". Enter キーが押されると、ボタンはフォームの送信イベントをトリガーします.

解決：

これは、el-form タグ@submit.native.prevent、コード例に追加することで解決できます。

<el-form :model="roleQueryParams" ref="roleQueryForm" size="small"
 :inline="true" label-width="68px" @submit.native.prevent>
    <el-form-item label="角色名称" prop="roleName">
        <el-input
            v-model="roleQueryParams.roleName"
            placeholder="请输入角色名称"
            clearable
            style="width: 250px"
            @keyup.enter.native="roleHandleQuery"
         />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="roleHandleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="roleResetQuery">重置</el-button>
     </el-form-item>
</el-form>