vue: 动态表单实现(多问题线)
之前写了一篇单问题线,这次写的是多问题线的逻辑思想。
如图,所谓的多问题线就是若问题块1的select1选了A,select2选了A,则会出现问题块3和问题块5,此时问题块3和问题块5是同级的,且不在一个问题线上,所以该次答题,至少有两条线上的答案需要获取。
这种情况下,上次的逻辑思想就无法解决该情况,就有了一个新的解决思路来解决,并且能解决多问题线的思路必能解决单问题线的问题。
需求需要解决的点:
- 逻辑结构不定,为后端提供
- 层级不定,由逻辑结构决定
- 填到最下面的叶子结点后,获取全部用户所填有效的问题结果
- 有创建和编辑功能,利用答案,反铺该答案所对应的表单
解决思路:
创建3个组件:
- index组件:整个表单
主要逻辑:
标示自己的父问题状态
铺页面:
循环逻辑结构数组,若fa为null或rule[fa].ans的答案等于faV时展示
提交答案:
循环逻辑结构数组,若fa为null或rule[fa].ans的答案等于faV时,获取答案
逻辑结构样例&#x