聊一聊vue中预览数据回填以后根据答案的多选和单选动态显示

        在项目中，遇到点击预览按钮，显示当前题目的详情，当选择的题目的答案是多选的是动态显示多选的答案，选择单选就动态显示单选的答案，具体效果如图所示

点击单选题的预览

 点击多选题的预览

 

具体代码：

// 父组件
</template>
  <el-button type="text" @click="hPreview(scope.row)">预览</el-button>
  <!-- 题目预览 -->
  <el-dialog title="题目预览" :visible.sync="showPreviewDialog">
     <QuestionsPreview :row="row" v-if="showPreviewDialog"></QuestionsPreview>
  </el-dialog>
</template>

<scirtp>
 data(){
  return:{
   showPreviewDialog: false,
   row:row
   }
  },
method:{
 async hPreview(row) {
    this.showPreviewDialog = true
    this.row = row
  }
}
</scirtp>

// 子组件
<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div v-if="tabeList.questionType === '1'">
          <el-row>【题干】:</el-row>
          <el-row><div v-html="tabeList.question"></div></el-row>
          <el-row>单选题选项: （以下选中的选项为正确答案）</el-row>
          <el-radio-group v-model="radio">
            <el-row v-for="item in tabeList.options" :key="item.id">
              <el-radio-group>
                <!-- 不能选的组 -->
                <el-radio v-if="item.isRight === 0" :label="item.isRight">{{ item.title }}</el-radio>
              </el-radio-group>
              <!-- 默认选中的组 -->
              <el-radio v-if="item.isRight === 1" :label="item.isRight">{{ item.title }}</el-radio>
            </el-row>
          </el-radio-group>
        </div>
        <div v-if="tabeList.questionType === '2'">
          <el-row>【题干】:</el-row>
          <el-row><div v-html="tabeList.question"></div></el-row>
          <el-row>多选题选项: （以下选中的选项为正确答案）</el-row>
          <el-row v-for="item in tabeList.options" :key="item.id">
            <el-checkbox-group v-model="checkeList">
              <!-- 不能选的组 -->
              <el-checkbox-group v-model="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>
        </div>
        <div v-if="tabeList.questionType === '3'">
          <el-row>【题干】:</el-row>
          <el-row><div v-html="tabeList.question"></div></el-row>
          <el-row><div v-html="tabeList.answer"></div></el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      tabeList: {},
      boolean: 'none',
      radio: 1,
      checkeList: [1],
      checkeList1: false
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  async created() {
    console.log('row', this.row)
    const res = await detail(this.row)
    this.tabeList = res.data
    console.log(res)
  },
  methods: {
    // 试题类型
    questionType(data) {
      if (data === '1') {
        return '单选'
      } else if (data === '2') {
        return '多选'
      } else {
        return '简单'
      }
    }
  }
}
</script>

<style scoped lang="less"></style>