关于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>
相关推荐
花菜会噎住1 小时前
Vue3核心语法进阶(computed与监听)
前端·javascript·vue.js
I'mxx1 小时前
【vue(2)插槽】
javascript·vue.js
花菜会噎住1 小时前
Vue3核心语法基础
前端·javascript·vue.js·前端框架
全宝1 小时前
echarts5实现地图过渡动画
前端·javascript·echarts
练习前端两年半3 小时前
Vue3 源码深度剖析:有状态组件的渲染机制与生命周期实现
前端·vue.js
吃饭睡觉打豆豆嘛3 小时前
彻底搞懂前端路由:从 Hash 到 History 的演进与实践
前端·javascript
lbh4 小时前
简单文本编辑器:基于原生JavaScript的智能文本选择工具栏
前端·javascript
典学长编程4 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
533_6 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
Jimmy6 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript