vue + element ui 阻止表单输入框回车刷新页面

Posted yuxiaole

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue + element ui 阻止表单输入框回车刷新页面相关的知识，希望对你有一定的参考价值。

问题

　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。

解决方案

　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。

测试

下面的代码出现表单回车提交

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

 下面的代码不会出现回车表单提交：el-form 中加上@submit.native.prevent

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent >
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

 下面的代码也不会出现回车表单提交：使用两个 el-input

<body>
<div id="app">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-input v-model="form.delivery"></el-input>
        </el-form-item>
    </el-form>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            form : {
            }
        }
    });
</script>

</body>

 

以上是关于vue + element ui 阻止表单输入框回车刷新页面的主要内容，如果未能解决你的问题，请参考以下文章

vue element-ui 的form表单验证rules

Vue.js - Element UI - 如何知道表单验证的状态

关于vue项目Element-UI 表单input输入框判定输入是不是为数字

vue element ui表单验证不通过，滚动到页面上第一个验证失败的输入框位置

多选下拉框回显无内容

element-ui表单部分验证报错