【实操】vue+element UI tab页多表单合并校验提交

这篇具有很好参考价值的文章主要介绍了【实操】vue+element UI tab页多表单合并校验提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景

一个页面中tab栏切换多个form表单组件,只有一个保存按钮。需要把各组件下的表达数据合并校验提交。

【实操】vue+element UI tab页多表单合并校验提交

思路

  1. 父组件通过两次调用$refs获取子组件的dom元素以及组件内部form的dom元素。
  2. 通过循环表单项获取validate值获取校验结果,通过Promise.all合并表单。
  3. 子组件内部getData方法返回表单数据,父调用子组件的getData方法获取子组件的表单值

代码

父页面:

<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="form1" name="first">
        <form-comp-one ref="formComp1" />
      </el-tab-pane>
      <el-tab-pane label="form2" name="second">
        <form-comp-two ref="formComp2" />
      </el-tab-pane>
    </el-tabs>
    <el-button class="submit-btn" size="small" @click="submit">提交</el-button>
  </div>
</template>
<script>
import FormCompOne from '@/components/FormCompOne.vue';
import FormCompTwo from '@/components/FormCompTwo.vue';
export default {
  components: {
    FormCompOne,
    FormCompTwo
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submit() {
      const _this = this
      const formData1 = _this.$refs.formComp1.$refs.formData
      const formData2 = _this.$refs.formComp2.$refs.formData
       Promise.all([formData1,formData2].map(_this.getFormPromise)).then(res => {
         console.log(res)
           const validateResult = res.every(item => !!item);
           if(validateResult) {
             const params = {
              ..._this.$refs.formComp1.getData(),
              ..._this.$refs.formComp2.getData(),
             }
             console.log(params)
              alert('提交成功')
           } else {
             alert('必填内容未填写')
           }
       })
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        })
      })
    },
  }
};
</script>
<style>
.submit-btn {
  position: absolute;
  right: 10px;
  top: 60px
}
</style>

子组件1

<template>
  <el-form 
  ref="formData"  
  :model="formData"
  :rules="formRules"
  label-width="80px" 
  style="width: 450px;"
  >
    <el-form-item label="名称" prop="name">
      <el-input class="f-input" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-input class="f-input" v-model="formData.region"></el-input>
    </el-form-item>
    <el-form-item label="活动形式" prop="type">
      <el-input class="f-input" v-model="formData.type"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  class formData {
    constructor() {
      this.name='';
      this.region = ''; 
      this.type = ''; 
    }
    static getRule() {
      return {
        name:  [{ required: true, message: '请填写名称', trigger: 'blur' }],
        region: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
        type: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      }
    }
  }
  export default {
    data() {
      return {
        formData: new formData,
        formRules: formData.getRule(),
      };
    },
    methods: {
      getData() {
        // 返回子组件的form
        return this.formData;
      },
    }
  }
</script>
<style scoped>

</style>

子组件2

<template>
  <el-form ref="formData" label-width="80px" :model="formData" :rules="formRules" style="width: 450px;">
    <el-form-item label="地址" prop="address">
      <el-input class="f-input" v-model="formData.address"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input class="f-input" v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-input class="f-input" v-model="formData.sex"></el-input>
    </el-form-item>
</el-form>
</template>
<script>
  class formData {
    constructor() {
      this.address='';
      this.age = ''; 
      this.sex = ''; 
    }
    static getRule() {
      return {
        address:  [{ required: true, message: '请填写名称', trigger: 'blur' }],
        age: [{ required: true, message: '请填写活动区域', trigger: 'blur' }],
        sex: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      }
    }
  }
  export default {
    data() {
      return {
        formData: new formData,
        formRules: formData.getRule(),
      };
    },
    methods: {
      getData() {
        // 返回子组件的form
        return this.formData;
      },
    }
  }
</script>
<style scoped>

</style>

源码

github代码地址:https://github.com/qi-Ruofan/formsMerge文章来源地址https://www.toymoban.com/news/detail-509259.html

到了这里,关于【实操】vue+element UI tab页多表单合并校验提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue +element UI form表单校验数组嵌套,数组对象必填校验

    使用element表单时会出现数组对象类型的数据结构并且需要必填校验 这时数组对象的检验方法就为paramJsonListRules 注意的是为了实现校验,在需要校验的el-form-item内通过自己的:rules加入对象的校验方法,例如图中想给参数值加校验则直接在相关el-form-item内加入 :rules=\\\"paramJsonLis

    2024年02月11日
    浏览(71)
  • vue element ui From表单校验不生效问题解决

    解决方案① el-from 上要使用 :model 不要使用 v-model 解决方案② el-from-item 上是否有加 prop ,并确定 prop 是不是和编写的规则相同 解决方案③ $refs[formName] 与 $refs.formName 注意事项 前者提交的时候要传参 @click=\\\"submitForm(\\\'ruleForm\\\')\\\" 不然不生效 解决方案④网上有人说 未在 data 里面声

    2024年02月11日
    浏览(38)
  • vue + element UI 表单中内嵌自定义组件的表单校验触发方案

    在表单中,可能部分表单项需封装成自定义组件,如何在表单提交时,能同步触发自定义组件的表单校验? 将表单绑定的变量传入自定义组件中,在自定义组件中定义表单校验规则 内嵌自定义组件 srctestindex.vue srctestsearch_job.vue

    2024年02月14日
    浏览(47)
  • Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能

    原创/朱季谦 最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。 简化的页面效果图如下: 最开始,我是用了纯粹的表格形

    2024年02月04日
    浏览(49)
  • 在vue里面,element ui,el-select表单选中校验失败

    在element 表单中我们需要校验,当表单中有数据变动时,会触发检验。 提示:这里描述项目中遇到的问题: 在项目中,提交时下拉菜单没有选,会触发校验提示,去选中下拉菜单的数据,不会再次触发校验,导致校验提示文字依然存在 一般来说遇到了校验失效问题,有值的

    2024年02月12日
    浏览(48)
  • 解决Vue+Element-UI 进行From表单校验时出现了英文提示问题

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 在使用 form 表单时,往往会对表单字段进行校验,字段为必填项时会添加 required 属性,此时自定义 rules 规则时就会需要表单输入框输入数据删除为空时,出现英文校验提示信息 代码如下: 将requ

    2024年02月14日
    浏览(53)
  • Vue element-ui form 表单 前端提交和后端的接收

    一、前端 1、新建弹窗dialog 2、在数据(data)里面绑定(return)数据 3、在method里新建方法 二、后端 1、在配置好mybatis-plus的前提下 2、在控制类中添加方法 3、@RequestBody注解的使用 @requestBody注解的使用 - 西风恶 - 博客园 (cnblogs.com)

    2024年02月15日
    浏览(57)
  • vue详细用法,ajax异步请求,案例分析 Element-ui组件使用,表单提交更新,下载,超详细

    标签及属性的使用 1.1 template 标签 1.2 form表单 1.2.1 ref属性 1.2.2 :model属性 1.2.3 :rules属性 1.2.4 label-width属性 1.2.5 el-row标签 1.2.5 el-col 标签 :span=\\\"12\\\"属性 1.2.5 el-form-item 标签 1.2.6 label 属性 1.2.7 prop属性 required 1.2.9 v-model属性 1.2.8 placeholder属性 效果图: 1.3 Select 选择器 当选项过多时,

    2023年04月12日
    浏览(91)
  • element ui中表单校验 以及文件上传的校验

    使用el-form组件 对表单项进行校验 通过配置 el-form 中的 :rules=“toDealRules” 对表单的每一项增添验证规则,验证规则写在 toDealRules 中,注意要对每一个需要校验的 el-form-item 项配置 prop 属性,每一条属性对应一条校验规则。每一个prop对应 toDealRules 中的一个数组。 对文件上传

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包