vue+element ui 实现跨题跳转_vue 自定义表单 跳题

vue+element ui 实现跨题跳转

在我们平时开发过程中，常规编写答题是做完上一道就会跳转到下一道题，但是我最近遇到的需求是有一定的逻辑性，比如我选择不同的选项，会跳转到相对应的题目，由于代码量过多，所以我把部分关键代码展示出来，下面是我实现的过程。

我的题有单选和多选，所以我用v-if判断显示和隐藏。
:disabled="disabledInspect"是控制答题过程的可操作性，也就是操作过的题不可编辑。

 <!--单选-->
            <el-radio-group v-model="resource[index]"
                            v-if="!(paper[index].num===7||paper[index].num===8||paper[index].num===9||
                            paper[index].num===11||paper[index].num===12||paper[index].num===16||
                            paper[index].num===17)"
            >
              <el-radio class="choice-radius" v-for="item in paper[index].selective"
                        :label="item.value" :key="item.value" :disabled="disabledInspect"
              >{{item.label}}</el-radio>
            </el-radio-group>
<!--多选-->
            <el-checkbox-group v-model="multi"
                               v-if="paper[index].num===7||paper[index].num===8||
                               (paper[index].num===11&&conceal === false)||
                               paper[index].num===12||paper[index].num===16||
                               paper[index].num===17">
              <el-checkbox  class="choice-radius"
                            name="type"
                            v-for="item in paper[index].selective"
                            :label="item.value"
                            :key="item.value"
                            :disabled="disabledInspect"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

题目结构：
num是题目编号，selective是选项

[
  {
    "num": 1,
    "title": "......................",
    "selective": [
      { "label": "是",
        "value": "0",
        "selected": "1"
      },
      { "label": "否",
        "value": "1",
        "selected": "2"
      }
    ]
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击下一题的js代码：
this.disabledInspect控制点击下一题的可操作性，temporary是点击选项的标识。这里的case3我说明一下，这道题我首先判断选项数量是否够3个，然后我再判断选项正确性。

this.disabledInspect = false
let temporary = this.resource[this.index]
switch (this.paper[this.index].num) {
      case 1:
        if (temporary === '0') {
          if (this.flip.indexOf(0) === -1) {
            this.flip.push(this.index)
          }
          this.index += 1
        } else if (temporary === '1') {
          this.index = 2
        } else {
          this.$message('请选择选项')
        }
        ;break
      case 2:
        if (temporary === '0') {
          if (this.imageUrl !== '') {
            this.index = 3
            this.imageUrl = ''
          } else {
            this.$message.error('请上传照片')
          }
        } else {
          if (this.imageUrl !== '') {
            this.index = 5
            flag = true
            this.imageUrl = ''
          } else {
            this.$message.error('请上传照片')
          }
        }
        ;break
      case 3:
        if (this.multi.join('').length === 3) {
          if (this.multi.join('').indexOf('0') !== -1 &&
              this.multi.join('').indexOf('1') !== -1 &&
              this.multi.join('').indexOf('3') !== -1) {
            this.index = 7
            this.storage[0] = this.multi
            this.multi = []
          } else {
            this.$message.error('请查看相关规章要求后重新作答')
            this.index = 6
            this.multi = []
            this.storage = {}
          }
        } else {
          this.$message.error('请查看相关规章要求后重新作答')
          this.index = 6
          this.multi = []
          this.storage = {}
        }
        ;break
        
      }
      //添加操作过的题的索引
      if (this.flip.indexOf(this.index) === -1) {
        this.flip.push(this.index)
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

点击上一题的js代码：
这里的flip是我们每点击一次下一题会存到flip数组里，这样在我们点击上一题时候，将flip传给index（题目角标），就可以实现跨题跳转了。
case6-16是将存在storage对象中的数组赋给multi，这样我们在点击上一题的时候，就不会看到没选中的问题了。

// 上一题
    previous () {
      if (this.index !== 0) {
        this.disabledInspect = true
        this.obtain = --this.flip.length
        this.index = this.flip[this.obtain - 1]
        switch (this.index) {
        case 6 :
          this.multi = this.storage[0]
          break
        case 7 :
          this.multi = this.storage[1]
          break
        case 10 :
          this.multi = this.storage[2]
          break
        case 11 :
          this.multi = this.storage[3]
          break
        case 15 :
          this.multi = this.storage[4]
          break
        case 16 :
          this.multi = this.storage[5]
          break
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

如果有什么问题，欢迎大家在下面留言