element-plus form表单按回车整个页面刷新

发表于 | 更新于: | 分类于 |
当表单只有一个文本框时，按回车将会触发表单的提交事件， 导致页面的刷新
1
2
3
4
5
6
7
8
9
10
11
<el-form :inline="true" size="large">
    <el-form-item>
        <el-input v-model="dataForm.q" placeholder="bean名称" clearable></el-input>
    </el-form-item>
    <el-form-item>
        <el-input placeholder="备注"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button @click="queryHandle()">查询</el-button>
    </el-form-item>
</el-form>
解决办法
  1. 在表单的提交按钮上添加 Vue 原生属性 native-type=“submit” 可以让按钮变为表单提交按钮
  2. 当表单中只有一个输入框时，按钮会默认为提交按钮
  3. 设置默认的提交按钮后需要阻止表单默认提交事件，在表单上添加 @submit.native.prevent 即可

由于Vue3废除.native 所以使用@submit.prevent

1
2
3
4
5
6
7
8
9
10
11
<el-form :inline="true" size="large" @submit.prevent>
    <el-form-item>
        <el-input v-model="dataForm.q" placeholder="bean名称" clearable></el-input>
    </el-form-item>
    <el-form-item>
        <el-input placeholder="备注"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button @click="queryHandle()">查询</el-button>
    </el-form-item>
</el-form>
坚持原创技术分享，您的支持将鼓励我继续创作！