试题中单选,多选,及简答题的回填数据

注意:本博客重点是记录渲染单选与多选的框框时候的思想,是大的<el-radio-group>再包含着一个只能是一个的<el-radio-group>,<el-checkbox-group>也是如此

效果:

 

本项目中是一个弹层中回填根据题的id值的不同,点击弹层是不同的题型,有单选,多选,简答

弹层中放置了一个<slot></slot>插槽

主组件根据数据回填的questionType来判断这三种题型谁来体现

单选题代码:

      <template v-if="tableList.questionType === '1'"> //tableList对象中的questionType如果是 
                                                       1就是单选
        <el-row>【题干】:</el-row>
        <el-row><div v-html="tableList.question"></div></el-row> // 题是<p>XXX<p>需要用v- 
                                                                  html来解析标签
        <el-row>单选题选项: （以下选中的选项为正确答案）</el-row>

        <el-radio-group v-model="radio"> // 绑定的是radio值,他与label值相同就会被选中,如果想回 
                                            填,后台返回的是1是选中状态,可以将radio在data中写死
                                            为1,这样就会被选中了
                                         // 这是最外层的el-radio-group

          <el-row v-for="item in tableList.options" :key="item.id">

            <el-radio-group> // 这是最内部包含的el-radio-group 为了能够渲染上没有被选的,不加就 
                              会都选不中了,因为他们用的v-if属于两套数据渲染
                             
              <!-- 不能选的组 -->
              <el-radio v-if="item.isRight === 0" :label="item.isRight">{{ item.title }} 
               </el-radio>
            </el-radio-group>
            <!-- 默认选中的组 -->
                                //注意此处不能在添加<el-radio-group>包含默认选中的组了,这样最外侧的的radio就不能够回填数据了
            <el-radio v-if="item.isRight === 1" :label="item.isRight">{{ item.title }}
          
             </el-radio-group> 
          </el-row>
        </el-radio-group>
      </template>

<script>
 data() {
    return {

       radio:1 // :label为1的会显示被选中
}

// 说明:isRight为1是正确答案 为0是未选中的答案
</script>

多选的代码:

<template v-if="tableList.questionType === '2'">
        <el-row>【题干】:</el-row>
        <el-row><div v-html="tableList.question"></div></el-row>
        <el-row>多选题选项: （以下选中的选项为正确答案）</el-row>
        <el-row v-for="item in tableList.options" :key="item.id">
          <el-checkbox-group v-model="checkeList"> // checklist是选中的数组,最外层的是判断 
                                                      哪些是选中
            <!-- 不能选的组 -->
            <el-checkbox-group v-model="checkeList1"> // 内层的第一是为了2套渲染都能渲染上
                                                       // checkeList1也是为了收集数据,虽然 
                                                       //  是数据的回填,如果是在添加就用的上 
                                                         了,没有太大意义
              <el-checkbox v-if="item.isRight === 0" :label="item.isRight" @click.native.prevent="">{{
                item.title
              }}</el-checkbox>
            </el-checkbox-group>
         
            <!-- 默认选中的组 -->
            <el-checkbox v-if="item.isRight === 1" :label="item.isRight" @click.native.prevent="">{{
              item.title
            }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
      </template>

<script>
 data() {
    return {

       checkeList: [1],// 默认为1的值是选中的状态          
      checkeList1: false, 
}

// 说明:isRight为1是正确答案 为0是未选中的答案
</script>