在做一个 Vue+elementUI 的 toB 项目,一个页面也 170 个字段。。。
一个大 form 单页面是不可能的,字段命名有很多差不多的不好处理,验证规则也是五花八门,还包括三种地图和各种奇奇怪怪的上传列表,之前提出过用分步骤创建的办法被甲方拒绝了
现在用自定义组件将不同组的字段结合在一起,每个组件是一个 form,组件里面单独写验证规则,主页面有一个创建按钮做数据汇总
最开始想的用 event bus 的方法在每个组件设置事件接收,再把验证结果存到 vuex 里面,但实现之后才发现异步验证很难做,有些字段需要根据其他字段的内容做二次验证,然后再到 server 异步验证,需要每个字段都放入 vuex,最后成了一个超长的 store.js ,看着不爽
所以想到在组件结合处调用 element 自带的 validate 方法,每个 validate 返回一个 promise 统一 catch,这个方法做起来很简单,最后使用效果也不错,就是在提交处有太多 then().then().then()
大神们有什么好方案吗
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.