Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element-UI中el-form内部在输入框回车导致刷新页面的问题解决。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：

当el-form表单里面只有一个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中只有一个输入框时，el-form会自动为输入框添加一个type="submit"的按钮，当按下回车键时，该按钮会触发表单的提交事件。

解决方法：

在el-form标签内加入@submit.native.prevent即可解决，代码示例：文章来源地址https://www.toymoban.com/news/detail-513495.html

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