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

当表单只有一个文本框时，按回车将会触发表单的提交事件， 导致页面的刷新

<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

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