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

这篇博客主要介绍了如何在Vue.js中实现单选和多选题组件的渲染。通过使用<el-radio-group>和<el-checkbox-group>,结合v-if和v-for指令,动态地展示题目和选项。对于单选题,外部<el-radio-group>与内部<el-radio-group>配合使用确保正确答案的呈现;而对于多选题,利用两个<el-checkbox-group>和v-model数组管理选中状态。文章还展示了数据回填和选项状态控制的实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

注意:本博客重点是记录渲染单选与多选的框框时候的思想,是大的<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值