vue一个页面多个组件,点击提交同时保存三个组件所有表单值(二)

您所在的位置:网站首页 vue提交多个表单 vue一个页面多个组件,点击提交同时保存三个组件所有表单值(二)

vue一个页面多个组件,点击提交同时保存三个组件所有表单值(二)

2023-09-06 01:47| 来源: 网络整理| 查看: 265

项目场景:

需求:一个页面多个组件,点击提交同时保存三个组件所有表单值。

场景:一个页面的表单太多分为三个页面来提交,每个页面都有保存和提交的按钮。要求每个页面如果不同的人填写的话,点击当前页面的保存或者提交按钮,三个组件中的所有表单都会被提交。类似下面这种 在这里插入图片描述

问题描述

提示:如何在某个组件中点击保存时,每个表单都保存。 思路:获取三个组件实例拿到form表单值。再请求接口,统一提交。 遇到的问题:在某个页面有个车牌号,需要获取,但是车牌号是汉字和字母拼接的数据,所以,我在该页面点击保存的时候,采取拼接车牌号。后来发现我点击其他界面的时候,车牌号总是为空,拿不到数据。发现拼接字符串不能在组件中,而应该在父组件中,统一提交表单之前,不然只有在点击保存的时候能获取到,那其他页面点击保存的时候,当然就获取不到了。

解决:在父组件中凭借车牌号。

save() { let form1 = this.$refs.weightInputRef.form let form2 = this.$refs.unloadInputRef.form let form3 = this.$refs.tareInputRef.form // // 车牌号转成字符串 form1.carNum = form1.car_prefix.concat(form1.car_num) let formData = { ...form1, ...form2, ...form3 } formData.oprType = 'save' //再请求保存的接口 }

头一次遇见这种需求,也是不长存在的需求,就记录一下。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3