V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
leafiy
V2EX  ›  问与答

用 Vue 的前端大神们怎么处理超大表单的?

  •  
  •   leafiy · 2018-07-01 21:48:45 +08:00 · 3494 次点击
    这是一个创建于 2337 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    大神们有什么好方案吗

    5 条回复    2018-07-02 08:00:13 +08:00
    wenzhoou
        1
    wenzhoou  
       2018-07-01 23:40:25 +08:00 via Android
    用户一次输入 170 个字段,然后一个字段验证出错了都不能提交。哦。这是一种什么样的体验啊。

    甲方不同意改设计。那好吧。摊手。
    你怎么不让我在针尖上盖大楼呢。
    leafiy
        2
    leafiy  
    OP
       2018-07-02 00:50:53 +08:00
    @wenzhoou 一个很严谨的科研型性项目,可以理解,跟甲方捯饬了一晚上,现在只剩 110 个了
    zhangzhang
        3
    zhangzhang  
       2018-07-02 07:56:29 +08:00
    试一下把一个超大表单分成几个步骤完成,这样每个步骤需要填写的东西就少了很多
    murmur
        4
    murmur  
       2018-07-02 07:58:57 +08:00
    这种东西在 jquery 年代就早解决了
    jQuery validation 啊 这个插件也支持异步验证的
    另外这种东西最好还是优化下需求
    pc 上渲染着不卡填起来也烦
    而且暂存一定要做好
    murmur
        5
    murmur  
       2018-07-02 08:00:13 +08:00
    @wenzhoou 行业软件是这样的 尤其是那些生产的数据上报系统 一个大系统检查项就那么多 总得有人去填
    而且高温下某些自动测量的设备也会受到影响 可能损坏
    所以光自动化测量也没用 人要定期去检查
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2643 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:29 · PVG 12:29 · LAX 20:29 · JFK 23:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.