vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现 试卷答题功能，单选题,多选题，判断题，简答题文章目录vue+element 实现 试卷答题功能，单选题,多选题，判断题，简答题难点：一、后端返回数据（）二、页面1.html2.js - 答题部分3.js - 回显部分总结难点：如何循环不同类型的题如何记录点击的是哪道题，并且分清楚他是单选还是多选单选还好，多选的话不能出现点了一道题，其他题的答案都是点击的这个选项回显的
·
vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
文章目录
难点：
- 如何循环不同类型的题
- 如何记录点击的是哪道题，并且分清楚他是单选还是多选
- 单选还好，多选的话不能出现点了一道题，其他题的答案都是点击的这个选项
- 回显的时候如何再把值赋上去
- 附加功能：设置开始时间和结束时间，未到时间不可答题（后端做判断），到时间后自动提交
要和后端商量，把所有时间搞成秒，这样好判断时间到没到，分钟的话太大，毫秒的话，不可能那么精确，而且脸黑的话，两个毫秒值永远不可能相等
ps： 一定要看注释
一、后端返回数据（）
{
"returnObject": {
"count": 380,
"list": [
{
"createTime": 1597030865000,
"delFlag": "0",
"id": 285,
"num": 0,
"questionType": "1",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "B",
"stContent": "多数轿车更换发动机机油的周期里程为________km。",
"stScore": 10,
"stSelecta": "2000--3000",
"stSelectb": "5000--8000",
"stSelectc": "10000--12000",
"stSelectd": "14000--16000",
"stType": "1"
},
{
"createTime": 1597030865000,
"delFlag": "0",
"id": 286,
"num": 0,
"questionType": "1",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "B",
"stContent": "关于镶套修理法，下面说法不正确的是（ ）",
"stScore": 10,
"stSelecta": "镶套后改变了零件的尺寸",
"stSelectb": "镶套材料应尽量与基体一致",
"stSelectc": "镶套采用了过盈配合",
"stSelectd": "配合表面要求加工精度较高",
"stType": "1"
},
{
"createTime": 1608101282000,
"delFlag": "0",
"id": 452,
"num": 0,
"questionType": "3",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "无",
"stAnswer": "A,B,C",
"stContent": "对磁盘与驱动器中，叙述正确的有",
"stCteater": "1",
"stScore": 10,
"stSelecta": "密度",
"stSelectb": "扇区",
"stSelectc": "磁道",
"stSelectd": "光标本",
"stSelecte": "孔口",
"stSelectf": "",
"stType": "1"
},
{
"createTime": 1608099445000,
"delFlag": "0",
"id": 443,
"num": 0,
"questionType": "3",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "无",
"stAnswer": "A,C,B",
"stContent": "计算机的主要特点是",
"stCteater": "1",
"stScore": 10,
"stSelecta": "运算速度快",
"stSelectb": "精度高",
"stSelectc": "存储记忆",
"stSelectd": "自动编程",
"stSelecte": "用十进制计数",
"stSelectf": "",
"stType": "1"
},
{
"createTime": 1606957884000,
"delFlag": "0",
"id": 372,
"num": 0,
"questionType": "2",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "错",
"stContent": "int是引用数据类型",
"stScore": 10,
"stSelecta": "对",
"stSelectb": "错",
"stType": "1"
},
{
"createTime": 1606957884000,
"delFlag": "0",
"id": 373,
"num": 0,
"questionType": "2",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "错",
"stContent": "string是引用数据类型",
"stScore": 10,
"stSelecta": "对",
"stSelectb": "错",
"stType": "1"
},
{
"createTime": 1606957884000,
"delFlag": "0",
"id": 376,
"num": 0,
"questionType": "4",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "数组和链表的区别",
"stContent": "ArrayList和LinkedList的区别",
"stScore": 10,
"stType": "1"
},
{
"createTime": 1545893669000,
"delFlag": "0",
"id": 44,
"num": 0,
"questionType": "4",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "数组和链表的区别",
"stContent": "1ArrayList和LinkedList的区别",
"stScore": 10,
"stSelecta": "",
"stSelectb": "",
"stSelectc": "",
"stSelectd": "",
"stType": "3"
}
]
},
"code": "200",
"message": "成功"
}
方法一
页面
1.html
<!-- 页面标题 -->
<div class="VSTD_box" v-if="question.length !== 0">
<h1 style="margin-bottom: 40px; text-align: center">
{{ iow.sjIntroduction }}
</h1>
<!-- 题的表单 -->
<!-- 绑定表单的数据 ruleForm -->
<!-- 绑定题的数组 ruleForm.resource[index] -->
data{
return{
ruleForm: {
resource: [],
},
}
}
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- 循环后端给你的所有题 -->
<div
class="VSTD_box_item"
v-for="(item, index) in question"
:key="item.id"
>
<!-- 1 单选 -->
<!-- 2 判断 -->
<!-- 3 多选 -->
<!-- 4 简答 -->
<div class="VSTD_box_item_title">
<!-- 题目的信息 -->
<p style="font-weight: 700">
第{{ index + 1 }}题：{{ item.stContent
}}<span>（{{ item.stScore }}分）</span>
<span v-if="item.questionType == 1">（单选）</span>
<span v-if="item.questionType == 2">（判断）</span>
<span v-if="item.questionType == 3">（多选）</span>
<span v-if="item.questionType == 4">（简答）</span>
</p>
</div>
<!-- 如果questionType 等于1 那么他是单选题 -->
<!-- 题目绑定的值是 ruleForm.resource[index] -->
<div v-if="item.questionType == 1" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-radio-group v-model="ruleForm.resource[index]">
<el-radio label="A">{{ item.stSelecta }}</el-radio>
<el-radio label="B">{{ item.stSelectb }}</el-radio>
<el-radio label="C">{{ item.stSelectc }}</el-radio>
<el-radio label="D">{{ item.stSelectd }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<!-- 如果questionType 等于2 那么他是判断题 -->
<!-- 题目绑定的值是 ruleForm.resource[index] -->
<div v-if="item.questionType == 2" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-radio-group v-model="ruleForm.resource[index]">
<el-radio label="对">{{ item.stSelecta }}</el-radio>
<el-radio label="错">{{ item.stSelectb }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<!-- 如果questionType 等于3 那么他是多选题 -->
<!-- 题目绑定的值是 ruleForm.resource[index] -->
<div v-if="item.questionType == 3" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-checkbox-group
@input="change($event)"
v-model="ruleForm.resource[index]"
>
<el-checkbox label="A">{{ item.stSelecta }}</el-checkbox>
<el-checkbox label="B">{{ item.stSelectb }}</el-checkbox>
<el-checkbox label="C">{{ item.stSelectc }}</el-checkbox>
<el-checkbox label="D">{{ item.stSelectd }}</el-checkbox>
<el-checkbox label="E">{{ item.stSelecte }}</el-checkbox>
<!-- <el-checkbox label="F">{{ item.stSelectf }}</el-checkbox> -->
</el-checkbox-group>
</el-form-item>
</div>
<!-- 如果questionType 等于4 那么他是简答题 -->
<!-- 题目绑定的值是 ruleForm.resource[index] -->
<div v-if="item.questionType == 4" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<!-- <el-form-item label="活动形式"> -->
<el-input
type="textarea"
v-model="ruleForm.resource[index]"
></el-input>
</el-form-item>
</div>
</div>
<!-- 提交函数 -->
<el-form-item style="text-align: center">
<el-button type="primary" @click="submitForm('ruleForm', false)"
>提交</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 如果没题就提示没题 -->
<div v-else>
<div class="none" style="margin-left: 0px">
<div class="none_img"></div>
<h3>暂无试题</h3>
</div>
</div>
<!-- 表单提交后显示分数的弹窗 -->
<el-dialog
title="您此次评分为"
:visible.sync="dialogVisible"
width="30%"
@close="handleClose"
>
<span style="font-size: 60px; color: #3e80f8">{{ score }}分</span>
<span slot="footer" class="dialog-footer">
<el-button @click="back()">返回</el-button>
<el-button type="primary" @click="go">我的测评</el-button>
</span>
</el-dialog>
2.js - 答题部分
//数据定义
data() {
return {
score: 0, //表单提交后，后端返回的总分
id: '', //获取路由的 query，试卷的id
iow: '', //返回的题目信息
dialogVisible: false, //弹窗
djStarttime: '', //获取当前时间
question: [], //保存后端返回题的数组，页面上需要用它来循环显示每一道题
ruleForm: {
resource: [], //每一道题的值
},
DSQ: null, //定时器，到时间自动提交
DSQTime: 0, //后端返回的结束时间
questionArrText: [], //答题保存的数组
}
},
逻辑
created() {
var djStarttime = new Date()
var year = djStarttime.getFullYear()
var month = (djStarttime.getMonth() + 1).toString()
var day = djStarttime.getDate().toString()
var hour = djStarttime.getHours().toString()
var minute = djStarttime.getMinutes().toString()
var second = djStarttime.getSeconds().toString()
if (month.length == 1) {
month = '0' + month
}
if (day.length == 1) {
day = '0' + day
}
if (hour.length == 1) {
hour = '0' + hour
}
if (minute.length == 1) {
minute = '0' + minute
}
if (second.length == 1) {
second = '0' + second
}
this.djStarttime =
year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
this.id = this.$route.query.id
//获取当前系统时间，传给后端，用来判断他用了多长时间
//console.log(this.dateTime)
this.init() //初始化函数
},
//监听定时器，如果 当前系统时间的秒值等于或大于后端给定的时间，那么就自动提交题目
watch: {
DSQTime: function (val, oldVal) {
console.log(this.DSQTime)
console.log(this.DSQEndTime)
if (this.DSQTime == this.DSQEndTime) {
clearInterval(this.DSQ)
this.submitForm('ruleForm', true)
}
},
},
methods: {
//给多选框用，否则会出现一个bug，就是先点一下多选框，然后没反应，
//然后点一下按钮或者点击下拉框后，这个多选框就高亮了
change(e) {
this.$forceUpdate()
},
//关闭弹窗函数
handleClose(done) {
this.dialogVisible = false
},
//跳页面的函数
go() {
this.$router.push({ path: '/ME' })
},
//返回上一页
back() {
this.$router.go(-1)
},
//初始化函数
init() {
//定时器，获取当前系统时间（毫秒），然后转化为秒
this.DSQ = setInterval(() => {
this.DSQTime = parseInt(Date.now() / 1000)
}, 1000)
//封装的接口，把试卷id传进去，返回所有题
msgApi
.questionsList(this.id)
.then((res) => {
if (res.data.code == 200) {
this.question = res.data.returnObject.list //页面循环的题
for (let i = 0; i < this.question.length; i++) {
//如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
if (this.question[i].questionType == 3) {
this.ruleForm.resource[i] = []
}else{
this.ruleForm.resource[i] = ''
}
}
this.questionArrText = res.data.returnObject.list //重新赋值，用来判断他是否全部答完
this.iow = res.data.returnObject.name //题的名字
this.DSQEndTime = parseInt(this.iow.endTime / 1000) //后端返回的时间（毫秒）转化为秒
}
})
.catch((err) => {})
},
//提交函数
//ifs 判断是否是用户自己点击的提交按钮，如果不是，那么就是到时间了，系统自动提交的
submitForm(formName, ifs) {
if (ifs) {
//系统自动提交的话
var arr = [] //最后给后端的是一个json串
var that = this
var b = this.ruleForm.resource.notempty()
//获取他已经答过的题
for (var i = 0; i < this.questionArrText.length; i++) {
var json = {} //最后给后端的是一个json串
json.id = that.questionArrText[i].id //json的id：题id
//如果是数组（也就是多选题），那么就用join把他换为字符串
if (that.ruleForm.resource[i] instanceof Array) {
json.text = that.ruleForm.resource[i].join()
} else {
json.text = that.ruleForm.resource[i]
}
if (json.text == undefined) { //如果这个题没答，那么就把他重置为空串，而不是给后端一个 undefined 字符串
json.text = ''
}
json.isJD = this.questionArrText[i].questionType //给后端题的类型
arr.push(json) //一个一个push进去
}
var obj = { //传的采纳数
djPaperid: this.id,
djStarttime: this.djStarttime,
djAnswers: JSON.stringify(arr),
}
msgApi
.answers(obj) //请求的接口
.then((res) => {
if (res.data.code == 200) {
//console.log(res)
this.dialogVisible = true
this.score = res.data.returnObject
}
})
.catch((err) => {})
} else {
this.$refs[formName].validate((valid) => { //如果是用户自己点的
if (valid) {
var arr = []
var that = this
var b = this.ruleForm.resource.notempty()
if (b.length !== this.questionArrText.length) {
//要是有未答的题目走if
this.$confirm(
'检测到您有未答完的题目，，是否确认提交试卷？',
'确认信息',
{
distinguishCancelAndClose: true,
confirmButtonText: '确认',
cancelButtonText: '取消',
}
)
.then(() => {
//逻辑和刚刚的一样，
for (var i = 0; i < this.questionArrText.length; i++) {
var json = {}
json.id = that.questionArrText[i].id
if (that.ruleForm.resource[i] instanceof Array) {
json.text = that.ruleForm.resource[i].join()
} else {
json.text = that.ruleForm.resource[i]
}
if (json.text == undefined) {
json.text = ''
}
json.isJD = this.questionArrText[i].questionType
arr.push(json)
}
var obj = {
djPaperid: this.id,
djStarttime: this.djStarttime,
djAnswers: JSON.stringify(arr),
}
msgApi
.answers(obj)
.then((res) => {
if (res.data.code == 200) {
//console.log(res)
this.dialogVisible = true
this.score = res.data.returnObject
}
})
.catch((err) => {})
})
.catch((action) => {})
} else {
//如果都答了，就走else （其实这个感觉没必要，不过就这吧）
for (var i = 0; i < this.questionArrText.length; i++) {
var json = {}
json.id = that.questionArrText[i].id
if (that.ruleForm.resource[i] instanceof Array) {
json.text = that.ruleForm.resource[i].join()
} else {
json.text = that.ruleForm.resource[i]
}
json.isJD = this.questionArrText[i].questionType
arr.push(json)
}
var obj = {
djPaperid: this.id,
djStarttime: this.djStarttime,
djAnswers: JSON.stringify(arr),
}
msgApi
.answers(obj)
.then((res) => {
if (res.data.code == 200) {
//console.log(res)
this.dialogVisible = true
this.score = res.data.returnObject
// this.$message.success(res.data.returnObject)
}
})
.catch((err) => {})
}
} else {
//console.log('error submit!!')
return false
}
})
}
},
resetForm(formName) {
this.$refs[formName].resetFields()
},
},
3.js - 回显部分
题目方面和之前的html一样，就是多了个disabled属性，
然后让后端把你给后端的json串拿到手之后，你再去获取到，做一个回显（后端工具人上线）
就发题目部分吧，其他的没什么用
<div
class="VSTD_box_item"
v-for="(item, index) in question"
:key="item.id"
>
<div class="VSTD_box_item_title">
<p>
第{{ index + 1 }}题：{{ item.stContent
}}<span>（{{ item.stScore }}分）</span>
</p>
</div>
<div v-if="item.questionType == 1" class="VSTD_box_item_select">
<el-form-item label="" prop="resource" style="margin-bottom: 0px">
<!-- 注意，这里回显的时候要 加上一个类型 -->
<!-- 单选，简答，判断用这个 ruleForm.resource[index].text -->
<!-- 多选用这个 ruleForm.resource[index].textarray-->
<!-- 因为数据类型不一样，所以要区分 -->
<el-radio-group v-model="ruleForm.resource[index].text">
<el-radio disabled label="A">{{ item.stSelecta }}</el-radio>
<el-radio disabled label="B">{{ item.stSelectb }}</el-radio>
<el-radio disabled label="C">{{ item.stSelectc }}</el-radio>
<el-radio disabled label="D">{{ item.stSelectd }}</el-radio>
</el-radio-group>
</el-form-item>
<span style="margin-left: 100px">
<div class="msgss">
<div>
正确答案：<span class="right">{{ item.stAnswer }}</span>
</div>
<div>
考生答案：<span class="error">
{{ ruleForm.resource[index].text }}</span
>
</div>
</div>
</span>
</div>
<div v-if="item.questionType == 2" class="VSTD_box_item_select">
<el-form-item label="" prop="resource" style="margin-bottom: 0px">
<el-radio-group v-model="ruleForm.resource[index].text">
<el-radio disabled label="对">{{ item.stSelecta }}</el-radio>
<el-radio disabled label="错">{{ item.stSelectb }}</el-radio>
</el-radio-group>
</el-form-item>
<span style="margin-left: 100px">
<div class="msgss">
<div>
正确答案：<span class="right">{{ item.stAnswer }}</span>
</div>
<div>
考生答案：<span class="error">
{{ ruleForm.resource[index].text }}</span
>
</div>
</div>
</span>
</div>
<div v-if="item.questionType == 3" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-checkbox-group
@input="change($event)"
v-model="ruleForm.resource[index].textarray"
style="margin-bottom: 0px"
>
<el-checkbox disabled label="A">{{
item.stSelecta
}}</el-checkbox>
<el-checkbox disabled label="B">{{
item.stSelectb
}}</el-checkbox>
<el-checkbox disabled label="C">{{
item.stSelectc
}}</el-checkbox>
<el-checkbox disabled label="D">{{
item.stSelectd
}}</el-checkbox>
<el-checkbox disabled label="E">{{
item.stSelecte
}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<span style="margin-left: 100px">
<div class="msgss">
<div>
正确答案：<span class="right">{{ item.stAnswer }}</span>
</div>
<div>
考生答案：<span class="error">
{{ ruleForm.resource[index].text }}</span
>
</div>
</div>
</span>
</div>
<div v-if="item.questionType == 4" class="VSTD_box_item_select">
<el-form-item label="" prop="resource" style="margin-bottom: 0px">
<el-input
disabled
type="textarea"
v-model="ruleForm.resource[index].text"
></el-input>
</el-form-item>
<span style="margin-left: 100px">
<div class="msgss">
<div>
正确答案：<span class="right">{{ item.stAnswer }}</span>
</div>
<div>
考生答案：<span class="error">
{{ ruleForm.resource[index].text }}</span
>
</div>
</div>
</span>
</div>
</div>
data() { //data还是这个
return {
score: 0,
id: '',
dialogVisible: false,
djStarttime: '',
question: [],
ruleForm: {
resource: [],
},
iow: '',
allanswer: [],
questionArr: [],
rules: {
resource: [
// { required: true, message: '请输入活动名称', trigger: 'blur' }
],
},
}
},
//init 函数有点不一样，先请求题目接口，然后请求答案接口
init() {
//题目接口
msgApi
.questionsList_look(this.id)
.then((res) => {
if (res.data.code == 200) {
this.question = res.data.returnObject.list
for (let i = 0; i < this.question.length; i++) {
this.questionArr.push(this.question[i].id)
}
this.iow = res.data.returnObject.name
}
})
.catch((err) => {})
msgApi
.MyAnswer(this.id)
.then((res) => {
if (res.data.code == 200) {
//console.log(res.data.returnObject)
this.allanswer = res.data.returnObject
this.answer = res.data.returnObject.contArray
console.log(this.answer)
this.ruleForm.resource = this.answer
}
})
.catch((err) => {})
},
方法二：
ps ：就是在后端返回题的时候，直接在返回的数据中创建一个保存答案的键值对，然后页面在v-model的时候，把这个创建的值再加上去就行了，止于表单验证什么的…估计得动态加了
1.html
<!-- 页面标题 -->
<div class="VSTD_box" v-if="question.length !== 0">
<h1 style="margin-bottom: 40px; text-align: center">
{{ iow.sjIntroduction }}
</h1>
<el-form
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<!-- 循环后端给你的所有题 -->
<div
class="VSTD_box_item"
v-for="(item, index) in question"
:key="item.id"
>
<!-- 1 单选 -->
<!-- 2 判断 -->
<!-- 3 多选 -->
<!-- 4 简答 -->
<div class="VSTD_box_item_title">
<!-- 题目的信息 -->
<p style="font-weight: 700">
第{{ index + 1 }}题：{{ item.stContent
}}<span>（{{ item.stScore }}分）</span>
<span v-if="item.questionType == 1">（单选）</span>
<span v-if="item.questionType == 2">（判断）</span>
<span v-if="item.questionType == 3">（多选）</span>
<span v-if="item.questionType == 4">（简答）</span>
</p>
</div>
<!-- 如果questionType 等于1 那么他是单选题 -->
<!-- 题目绑定的值是 每一项的 item.resource -->
<div v-if="item.questionType == 1" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-radio-group v-model="item.resource">
<el-radio label="A">{{ item.stSelecta }}</el-radio>
<el-radio label="B">{{ item.stSelectb }}</el-radio>
<el-radio label="C">{{ item.stSelectc }}</el-radio>
<el-radio label="D">{{ item.stSelectd }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<!-- 如果questionType 等于2 那么他是判断题 -->
<!-- 题目绑定的值是 每一项的 item.resource -->
<div v-if="item.questionType == 2" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-radio-group v-model="item.resource">
<el-radio label="对">{{ item.stSelecta }}</el-radio>
<el-radio label="错">{{ item.stSelectb }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<!-- 如果questionType 等于3 那么他是多选题 -->
<!-- 题目绑定的值是 每一项的 item.resource -->
<div v-if="item.questionType == 3" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<el-checkbox-group
@input="change($event)"
v-model="item.resource"
>
<el-checkbox label="A">{{ item.stSelecta }}</el-checkbox>
<el-checkbox label="B">{{ item.stSelectb }}</el-checkbox>
<el-checkbox label="C">{{ item.stSelectc }}</el-checkbox>
<el-checkbox label="D">{{ item.stSelectd }}</el-checkbox>
<el-checkbox label="E">{{ item.stSelecte }}</el-checkbox>
<!-- <el-checkbox label="F">{{ item.stSelectf }}</el-checkbox> -->
</el-checkbox-group>
</el-form-item>
</div>
<!-- 如果questionType 等于4 那么他是简答题 -->
<!-- 题目绑定的值是 每一项的 item.resource -->
<div v-if="item.questionType == 4" class="VSTD_box_item_select">
<el-form-item label="" prop="resource">
<!-- <el-form-item label="活动形式"> -->
<el-input
type="textarea"
v-model="item.resource"
></el-input>
</el-form-item>
</div>
</div>
<!-- 提交函数 -->
<el-form-item style="text-align: center">
<el-button type="primary" @click="submitForm()"
>提交</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 如果没题就提示没题 -->
<div v-else>
<div class="none" style="margin-left: 0px">
<div class="none_img"></div>
<h3>暂无试题</h3>
</div>
</div>
2.js - 答题部分
//数据定义
data() {
return {
question: [], //保存后端返回题的数组，页面上需要用它来循环显示每一道题
}
},
逻辑
created() {
this.init() //初始化函数
},
methods: {
//给多选框用，否则会出现一个bug，就是先点一下多选框，然后没反应，
//然后点一下按钮或者点击下拉框后，这个多选框就高亮了
//初始化函数
init() {
msgApi
.questionsList(this.id)
.then((res) => {
if (res.data.code == 200) {
var json = res.data.returnObject.list
for (let i = 0; i < json.length; i++) {
//如果他是多选题的话，把它初始化为一个数组，而不是普通的字符串
if (json[i].questionType == 3) {
json[i].resource = []
//直接给每一项加一个resource属性，因为res.data他是一个对象，所以可以任意给他添加新的键值对
}else{
json[i].resource = ''
}
}
}
this.question = json //页面循环的题
})
.catch((err) => {})
},
3.js - 回显部分
后端也是会给你返回这样的数据
{
"returnObject": {
"count": 380,
"list": [
{
"createTime": 1597030865000,
"delFlag": "0",
"id": 285,
"num": 0,
"questionType": "1",
"sjIntroduction": "计算机基本知识",
"stAnalysis": "JEIIXJIEJXIJIEXIJEIX",
"stAnswer": "B",
"stContent": "多数轿车更换发动机机油的周期里程为________km。",
"stScore": 10,
"stSelecta": "2000--3000",
"stSelectb": "5000--8000",
"stSelectc": "10000--12000",
"stSelectd": "14000--16000",
"stType": "1"
"用户选择的答案": "A" //会给你个这个字段
}
]
},
"code": "200",
"message": "成功"
}
就是多了一个字段，然后你再把这个字段赋值给item.resource 即可
总结
其他不难，难的是如何使用v-model绑定数据，然后如何让他点哪个哪个高亮
方法一优点：可以使用表单的任何属性，使用方便
方法一缺点：数据结构有点麻烦，然后提交函数最好封装一下
方法二优点：没有报错，不用搞那么多乱七八糟的函数，看着省心，用着及其方便
方法二缺点：表单验证什么的…你懂得
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
29
0- 0
已为社区贡献1条内容
所有评论(0)