【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击

前言:
今天在工作过程中发现了一个在el-form中比较好用的按钮防重点击和输入框回车调接口刷新的方法,在此记录一下

javascript 复制代码
<template>
  <el-form @submit.prevent="onSubmit">
    <el-form-item label="名称">
      <el-input v-model="formData.name" @keyup.enter="onSubmit"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit" :loading="loading">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      },
      loading: false
    };
  },
  methods: {
    onSubmit() {
      // 表单提交逻辑
      this.loading = true
      console.log('表单提交:', this.formData);
      // 这里可以添加表单验证、数据处理等逻辑,表单提交成功后
      this.loading = false
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
.el-form {
  max-width: 400px;
  margin: 0 auto;
}
</style>

/** 
1、@keyup.enter可以用在el-input输入框中,也可以用在el-form表单中,比如查询的时候就可以直接把@keyup.enter放在el-from表单中<el-form @keyup.enter="refreshList()">,这样每个查询条件的输入框都可以回车调用查询接口刷新页面数据了。 
2、@keyup.enter 事件修饰符
作用:当用户在指定的元素上按下 Enter 键时触发事件。
使用场景:通常用于表单输入框中,当用户按下 Enter 键时执行某个操作,比如提交表单或执行搜索。
3、@submit.prevent 事件修饰符
作用:在表单提交时阻止默认的提交行为,并触发指定的方法。
使用场景:通常用于表单提交时,防止表单页面刷新或跳转,并在提交前进行一些验证或处理。
4、这两个事件修饰符经常一起使用,以实现更灵活的表单提交和交互逻辑。
**/

以上是我遇到的一种方式,如果大家有更好的方法欢迎评论区交流。

相关推荐
江城开朗的豌豆1 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山9 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45318 分钟前
css模块化以及rem布局
前端·javascript·css
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴10 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust11 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript