基于vue与element实现创建试卷相关功能-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43620423/article/details/110731009

本文介绍了如何使用Vue和ElementUI来创建和预览试卷，详细讲解了试卷设置、试题添加、删除及数据验证的过程，并提供了源码仓库链接供参考。

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

由于最近在一个项目中需要实现创建试卷与预览试卷的功能，所以就自己动手写了一个，效果还不错，目前项目已经交付使用，今天就先和大家分享一下创建试卷。
源码已上传至gitee仓库，地址https://gitee.com/mingDn/exam

创建试卷

先放一下效果图
创建试卷
首先是试卷的相关设置

考试对象是通过接口返回的数据

<span class="content-label">选择考试对象</span>
<el-form-item prop="roleList">
	<el-select
		v-model="form.roleList"
		multiple
		filterable
		allow-create
		default-first-option
		placeholder="请选择考试对象"
	>
		<el-option
			v-for="item in roles"
			:key="item.value"
			:label="item.label"
			:value="item.value"
		/>
	</el-select>
</el-form-item>

需要定义的data数据

roles: [], //考试对象选择列表（接口返回）
form: {
   
	title: '',
	roleList: [], // 考试对象
	deadline: '', // 截止时间
	questions: []
},

获取考试对象列表

getRoles() {
   
	crudRoles.getAll().then(res => {
   
		res.map((obj) => {
   
			const role = {
   
				value: obj.id,
				label: obj.name
			}
			this.roles.push(role)
		})
	})
},

截至时间使用的是element时间日期选择器

<span class="content-label">截止时间</span>
<el-form-item prop="deadline">
	<el-date-picker
	v-model="form.deadline"
	type="datetime"
	placeholder="选择日期时间"
	value-format="yyyy-MM-dd HH:mm:ss"
	/>
</el-form-item>

然后是添加试题
试题类型的相关数据也是通过接口返回的

data数据

questionType: [],

获取试题类型

getQuestionType() {
   
	crudExam.getQuestionType().then(res => {
   
		this.questionType = res
	})
},

<div class="question-type">
	<el-button
		v-for="item in questionType"
		:key="item.typeId"
		style="border-color: #2A82E4; color: #2A82E4"
		@click="addQuestion(item.typeId)"
	>
		<svg-icon :icon-class="item.icon" />
		{
  { item.typeName }}
	</el-button>
</div>

addQuestion(typeId) {
   
	const question = {
   
		id: this.questionId,
        quesTypeId: typeId,
        title: '',
        score: 0,
        answer: [],
        content: []
	}
	this.form.questions.push(question)
	this.questionId++
},

对于添加的试题模板则是单独创建了一个question.vue
这里由于其他布局方法一直不太理想，所以采用了栅格布局，效果还算可以

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix" style="margin-bottom: -10px">
      <span
        class="type-name"
        v-text="question.quesTypeId < 3 ?
          question.quesTypeId === 1 ?
            '单选题' : '多选题'
          : question.quesTypeId < 5 ?
            question.quesTypeId === 3 ?
              '填空题' : '简答题'
            : '判断题'"
      >卡片名称</span>
      <el-input v-model