关于el-form中的el-input回车自动刷新页面

javascript 复制代码
<el-form>
    <el-form-item>
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="handleSearch()"
          clearable
        >
          <el-button
            @click="handleSearch()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>

上传代码回车执行handleSearch方法的时候会自动刷新页面

解决办法:

1.如果el-form-item里面包含了两个及以上表单元素,回车事件就不会自动刷新,可以给其中一个input设置display:none属性

javascript 复制代码
<el-form>
    <el-form-item>
        <el-input v-model="aaa" style="display:none"></el-input>
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="handleSearch()"
          clearable
        >
          <el-button
            @click="handleSearch()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>

2.给el-form的设置@submit.native.prevent="return false;"方法

javascript 复制代码
<el-form>
    <el-form-item @submit.native.prevent="return false;">
        <el-input
          v-model.trim="tablePage.keyWords"
          size="small"
          placeholder="请输入"
          @keyup.enter.native="handleSearch()"
          clearable
        >
          <el-button
            @click="handleSearch()"
            slot="prepend"
            icon="el-icon-search"
          ></el-button>
        </el-input>
    </el-form-item>
</el-form>
相关推荐
熊出没17 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN17 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠23 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句2 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜2 小时前
CommonJS与ESM
前端·javascript
G等你下课2 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven2 小时前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试