el-form表单 input回车刷新页面问题

1原因

是因为当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 所以会产生刷新页面的行为

解决方案:

<el-form :model="queryData" ref='queryData' status-icon @submit.native.prevent>
    <el-form-item label="菜单" label-width="100px" prop="menuName">
       <el-input type="text" v-model="queryData.menuName" @keyup.enter.native="getList()"></el-input>
    </el-form-item>
</el-form>

在el-form 标签增加 @submit.native.prevent

 

解释:

@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面