<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="科目名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="search">搜索</el-button>
<el-button icon="Refresh" @click="reset">重置</el-button>
</el-form-item>
</el-form>
上面代码在输入条件直接点击回车键
时当前路由刷新
了
解决方法为:给el-form添加@submit.prevent=“search”
添加的代码为当用户填写完表单并按下提交按钮时,这个事件会被触发。.prevent 是一个事件修饰符,用于阻止事件的默认行为。在 HTML 表单中,默认行为通常是提交表单到服务器,这可能会导致页面刷新。通过使用 .prevent,我们可以阻止这种默认行为,从而可以在
不刷新
页面的情况下执行自定义的 JavaScript 代码。
具体代码如下:
<el-form :model="queryParams" ref="queryRef" :inline="true" @submit.prevent="search">
<el-form-item label="科目名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="search">搜索</el-button>
<el-button icon="Refresh" @click="reset">重置</el-button>
</el-form-item>
</el-form>