In Element-UI, the problem of refreshing the page caused by pressing Enter in the input box inside the el-form is solved.

Problem Description:

When el-formthere is only one el-inputinput box in the form, pressing Enter when the input box is selected will refresh the page:

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

problem analysis:

By default, el-formwhen there is only one input box in , el-forma button will be automatically added to the input box type="submit". When the Enter key is pressed, the button will trigger the submit event of the form.

Solution:

It can be solved by adding it in the el-form tag @submit.native.prevent, code example:

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