vue大型项目拆分_用 Vue 的前端大神们怎么处理超大表单的?

在做一个 Vue+elementUI 的 toB 项目,一个页面也 170 个字段。。。

一个大 form 单页面是不可能的,字段命名有很多差不多的不好处理,验证规则也是五花八门,还包括三种地图和各种奇奇怪怪的上传列表,之前提出过用分步骤创建的办法被甲方拒绝了

现在用自定义组件将不同组的字段结合在一起,每个组件是一个 form,组件里面单独写验证规则,主页面有一个创建按钮做数据汇总

最开始想的用 event bus 的方法在每个组件设置事件接收,再把验证结果存到 vuex 里面,但实现之后才发现异步验证很难做,有些字段需要根据其他字段的内容做二次验证,然后再到 server 异步验证,需要每个字段都放入 vuex,最后成了一个超长的 store.js ,看着不爽

所以想到在组件结合处调用 element 自带的 validate 方法,每个 validate 返回一个 promise 统一 catch,这个方法做起来很简单,最后使用效果也不错,就是在提交处有太多 then().then().then()

大神们有什么好方案吗

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值