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