关于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>
相关推荐
北辰浮光34 分钟前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript
用户8417948145637 分钟前
vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相拖拽数据
前端·vue.js
好好好明天会更好1 小时前
Vue中this.$options.data()是什么东西?
前端·vue.js
scorpion_V1 小时前
WebRTC 结合云手机:释放实时通信与虚拟手机的强大协同效能
vue.js·智能手机·webrtc
前端小木屋1 小时前
浅谈vue3响应式原理
前端·vue.js
libraG1 小时前
vue样式问题
css·vue.js·scss
超哥的一天2 小时前
【前端】每天一个简单库的使用-vue-office
vue.js
掘金安东尼2 小时前
Rspack 推出 Rslint:一个用 Go 编写的 TypeScript-First Linter
前端·javascript·github
前端付豪2 小时前
🔥Vue3 Composition API 核心特性深度解析:为什么说它是前端的“终极武器”?
前端·vue.js
蓝胖子的小叮当2 小时前
JavaScript基础(十四)字符串方法总结
前端·javascript