這期內容當中小編將會給大家帶來有關利用vue與element怎么創建一個試卷，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
實現方法如下
<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"
@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" >
<span
class="type-name"
v-text="question.quesTypeId < 3 ?
question.quesTypeId === 1 ?
'單選題' : '多選題'
: question.quesTypeId < 5 ?
question.quesTypeId === 3 ?
'填空題' : '簡答題'
: '判斷題'"
>卡片名稱</span>
<el-input v-model="question.score" />
<span>分</span>
<el-button icon="el-icon-close" @click="removeQuestion" />
</div>
<el-form-item>
<el-input
v-model="question.title"
type="textarea"
placeholder="請輸入題干內容..."
/>
</el-form-item>
<!--單選、多選-->
<el-form-item v-if="question.quesTypeId === 1 || question.quesTypeId === 2" >
<el-checkbox-group
v-model="question.answer"
:min="0"
:max="question.quesTypeId === 1 ? 1 : 4"
>
<el-row
v-for="(item, index) in ['A', 'B', 'C', 'D']"
:key="item"
>
<el-col :span="1">
<el-checkbox-button
v-model="question.answer"
:label="question.content[index]"
border
>
{{ item }}
</el-checkbox-button>
</el-col>
<el-col :span="23">
<el-input
v-model="question.content[index]"
placeholder="請輸入選項..."
@input="contentChange(question)"
/>
</el-col>
</el-row>
</el-checkbox-group>
</el-form-item>
<!--簡答、填空-->
<el-form-item v-if="question.quesTypeId === 3 || question.quesTypeId === 4" >
<el-input
v-model="question.answer[0]"
type="textarea"
placeholder="請輸入參考答案"
/>
</el-form-item>
<!--判斷-->
<el-form-item v-if="question.quesTypeId === 5" >
<el-checkbox-group
v-model="question.answer"
:min="0"
:max="1"
>
<el-checkbox v-model="question.answer" label="對" border />
<el-checkbox v-model="question.answer" label="錯" border />
</el-checkbox-group>
</el-form-item>
</el-card>
</template>
<script>
export default {
props: {
question: {
type: Object,
required: true
}
},
methods: {
removeQuestion() {
this.$emit('removeQuestion', this.question.id)
},
contentChange(question) {
question.answer.splice(0)
}
}
}
</script>
<style scoped>
.type-name {
color: #505050;
margin-right: 20px;
}
</style>然后是刪除試題
<question v-for="item in form.questions" :key="item.id" :question="item" class="question-content" @removeQuestion="removeQuestion" />
removeQuestion(id) {
for (let i = 0; i < this.form.questions.length; i++) {
if (this.form.questions[i].id === id) {
this.form.questions.splice(i, 1)
}
}
},最后提交方法中進行數據驗證
這個在之前一篇博客中簡單介紹過，感興趣的朋友可以自行前去了解
Vue關于Element對表單的校驗
最最后把create.vue的源碼分享給大家方便大家進行參考，如有更好的建議也請大家不吝賜教
<template>
<div class="app-container">
<div>
<el-form
ref="form"
:model="form"
:rules="rules"
class="form"
>
<h5 class="card-label">設置任務</h5>
<div class="card-panel">
<div class="settings-wrap" >
<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>
</div>
<div class="settings-wrap" >
<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>
</div>
</div>
<h5 class="card-label">試卷標題</h5>
<div class="card-panel">
<div class="settings-wrap" >
<el-form-item prop="title">
<el-input
v-model="form.title"
type="text"
placeholder="請輸入試卷標題（1-20個字）"
maxlength="20"
show-word-limit
/>
</el-form-item>
</div>
</div>
<question
v-for="item in form.questions"
:key="item.id"
:question="item"
class="question-content"
@removeQuestion="removeQuestion"
/>
<div class="question-type">
<el-button
v-for="item in questionType"
:key="item.typeId"
@click="addQuestion(item.typeId)"
>
<svg-icon :icon-class="item.icon" />
{{ item.typeName }}
</el-button>
</div>
<el-button
type="primary"
class="submit"
:loading="loading"
@click="submit"
>
提交試卷
</el-button>
</el-form>
</div>
</div>
</template>
<script>
import crudRoles from '@/api/system/role'
import crudExam from '@/api/exam/exam'
import question from '@/views/exam/module/question'
import crudList from '@/api/exam/list'
export default {
name: 'Create',
components: {
question
},
data() {
return {
roles: [],
dialogVisible: false,
loading: false,
questionId: 0,
form: {
title: '',
roleList: [], // 考試對象
deadline: '', // 截止時間
questions: []
},
questionType: [],
rules: {
roleList: [{
required: true,
message: '請選擇考試對象',
trigger: 'blur'
}],
deadline: [{
required: true,
message: '請選擇截止時間',
trigger: 'blur'
}],
title: [{
required: true,
message: '請輸入試卷標題（1-20個字）',
trigger: 'blur'
}]
}
}
},
created() {
this.getRoles()
this.getQuestionType()
},
methods: {
getRoles() {
crudRoles.getAll().then(res => {
res.map((obj) => {
const role = {
value: obj.id,
label: obj.name
}
this.roles.push(role)
})
})
},
getQuestionType() {
crudExam.getQuestionType().then(res => {
this.questionType = res
})
},
addQuestion(typeId) {
const question = {
id: this.questionId,
quesTypeId: typeId,
title: '',
score: 0,
answer: [],
content: []
}
this.form.questions.push(question)
this.questionId++
},
removeQuestion(id) {
for (let i = 0; i < this.form.questions.length; i++) {
if (this.form.questions[i].id === id) {
this.form.questions.splice(i, 1)
}
}
},
submit() {
if (this.form.questions.length === 0) {
this.$notify({
title: '警告',
message: '請添加試題',
type: 'warning'
})
return
}
const form = JSON.parse(JSON.stringify(this.form))
let isSubmit = true
let message = ''
this.loading = true
this.$refs['form'].validate(res => {
if (!res) {
this.loading = false
return
}
for (let i = 0; i < form.questions.length; i++) {
const question = form.questions[i]
if (question.title === '') {
isSubmit = false
message = '請設置題目題干'
break
}
if ((question.quesTypeId === 1 || question.quesTypeId === 2) && question.content.length === 0) {
isSubmit = false
message = '請設置選擇題題答案'
break
}
if ((question.quesTypeId === 1 || question.quesTypeId === 2 || question.quesTypeId === 5) && question.answer.length === 0) {
isSubmit = false
message = '請設置客觀題選項'
break
}
}
if (!isSubmit) {
this.$notify({
title: '警告',
message: message,
type: 'warning'
})
this.loading = false
return
}
form.questions.forEach(function(question) {
question.answer = JSON.stringify(question.answer)
question.content = JSON.stringify(question.content)
})
crudExam.add(form).then((res) => {
this.loading = false
const params = {
type: 2,
typeId: res,
url: this.$frontUrl + '/answerOnline'
}
crudList.remind(params).then(() => {
this.$message.success('提醒成功~')
})
this.$router.push('/exam/index')
}).catch(() => {
this.loading = false
})
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-label {
margin: 30px 0 15px;
}
.card-panel {
display: flex;
flex-direction: row;
padding: 17px 15px 0;
color: #666;
box-shadow: 0 0 3px 1px #e7e7e7;
border-color: #e7e7e7;
.settings-wrap {
margin-right: 4%;
}
}
.content-label {
display: block;
padding-bottom: 5px;
}
.question-type {
margin-top: 20px;
}
.question-content {
margin-top: 20px;
color: #666;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
}
</style>上述就是小編為大家分享的利用vue與element怎么創建一個試卷了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
