表单联动

Question

老师，我在最近面试提到这个项目的时候，面试官会问到表单联动。如果在这个项目使用表单联动的话，能大概提供下开发思路吗?

1. 比如跳转逻辑，回答完第一个问题跳转到第三个问题
2. 或者是第一个问题的的答案可以控制第二个问题是否显示

我想了想如果针对第二个例子是不是可以每个组件设置个 show 属性, 然后在写一个处理函数，每次用户做完一个问题之后都进入这个处理函数，然后在处理函数内部遍历所有的组件来更新关联组件的 show 属性来决定是否展示。
但是总体感觉还是有点绕，希望老师能给些思路

Answer 1

双越 2024-03-23 08:39:05

应该先从数据结构的设计入手，这种联动的表单，你应该如何设计数据结构呢？

注意，不是最后提交给服务端的 JSON 数据，而是你网页交互使用的数据结构。

先从这个方向来思考。

• 慕粉3946981 #1

  这功能有意思，根据前面填写的表单动态修改后面的表单
  比如第第1个input里面问存款，第2个是一个多选项，第一组是汽车，第二组是摩托车和电动车，第三组是自行车，根据第一个input里面的值来动态调整显示哪个多选项。

• 慕粉3946981 #2

  有些不理解双越老师说的设计数据结构是什么意思，这个联动表单问卷填写一开始肯定是全量数据，在填写的过程中动态联动。
  我的思路是填写表单是获取的是全量表单数据，然后通过事件监听来动态显示和隐藏，填写完后发给后端的数据中没有填写隐藏的表单是默认值