您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)利用vue與element怎么創(chuàng)建一個(gè)試卷,文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
實(shí)現(xiàn)方法如下
<span class="content-label">選擇考試對(duì)象</span> <el-form-item prop="roleList"> <el-select v-model="form.roleList" multiple filterable allow-create default-first-option placeholder="請(qǐng)選擇考試對(duì)象" > <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item>
需要定義的data
數(shù)據(jù)
roles: [], //考試對(duì)象選擇列表(接口返回) form: { title: '', roleList: [], // 考試對(duì)象 deadline: '', // 截止時(shí)間 questions: [] },
獲取考試對(duì)象列表
getRoles() { crudRoles.getAll().then(res => { res.map((obj) => { const role = { value: obj.id, label: obj.name } this.roles.push(role) }) }) },
截至?xí)r間使用的是element時(shí)間日期選擇器
<span class="content-label">截止時(shí)間</span> <el-form-item prop="deadline"> <el-date-picker v-model="form.deadline" type="datetime" placeholder="選擇日期時(shí)間" value-format="yyyy-MM-dd HH:mm:ss" /> </el-form-item>
然后是添加試題
試題類(lèi)型的相關(guān)數(shù)據(jù)也是通過(guò)接口返回的
data
數(shù)據(jù)
questionType: [],
獲取試題類(lèi)型
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++ },
對(duì)于添加的試題模板則是單獨(dú)創(chuàng)建了一個(gè)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 ? '填空題' : '簡(jiǎn)答題' : '判斷題'" >卡片名稱(chēng)</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="請(qǐng)輸入題干內(nèi)容..." /> </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="請(qǐng)輸入選項(xiàng)..." @input="contentChange(question)" /> </el-col> </el-row> </el-checkbox-group> </el-form-item> <!--簡(jiǎn)答、填空--> <el-form-item v-if="question.quesTypeId === 3 || question.quesTypeId === 4" > <el-input v-model="question.answer[0]" type="textarea" placeholder="請(qǐng)輸入?yún)⒖即鸢?quot; /> </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="對(duì)" border /> <el-checkbox v-model="question.answer" label="錯(cuò)" 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) } } },
最后提交方法中進(jìn)行數(shù)據(jù)驗(yàn)證
這個(gè)在之前一篇博客中簡(jiǎn)單介紹過(guò),感興趣的朋友可以自行前去了解
Vue關(guān)于Element對(duì)表單的校驗(yàn)
最最后把create.vue
的源碼分享給大家方便大家進(jìn)行參考,如有更好的建議也請(qǐng)大家不吝賜教
<template> <div class="app-container"> <div> <el-form ref="form" :model="form" :rules="rules" class="form" > <h5 class="card-label">設(shè)置任務(wù)</h5> <div class="card-panel"> <div class="settings-wrap" > <span class="content-label">選擇考試對(duì)象</span> <el-form-item prop="roleList"> <el-select v-model="form.roleList" multiple filterable allow-create default-first-option placeholder="請(qǐng)選擇考試對(duì)象" > <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">截止時(shí)間</span> <el-form-item prop="deadline"> <el-date-picker v-model="form.deadline" type="datetime" placeholder="選擇日期時(shí)間" value-format="yyyy-MM-dd HH:mm:ss" /> </el-form-item> </div> </div> <h5 class="card-label">試卷標(biāo)題</h5> <div class="card-panel"> <div class="settings-wrap" > <el-form-item prop="title"> <el-input v-model="form.title" type="text" placeholder="請(qǐng)輸入試卷標(biāo)題(1-20個(gè)字)" 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: [], // 考試對(duì)象 deadline: '', // 截止時(shí)間 questions: [] }, questionType: [], rules: { roleList: [{ required: true, message: '請(qǐng)選擇考試對(duì)象', trigger: 'blur' }], deadline: [{ required: true, message: '請(qǐng)選擇截止時(shí)間', trigger: 'blur' }], title: [{ required: true, message: '請(qǐng)輸入試卷標(biāo)題(1-20個(gè)字)', 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: '請(qǐng)?zhí)砑釉囶}', 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 = '請(qǐng)?jiān)O(shè)置題目題干' break } if ((question.quesTypeId === 1 || question.quesTypeId === 2) && question.content.length === 0) { isSubmit = false message = '請(qǐng)?jiān)O(shè)置選擇題題答案' break } if ((question.quesTypeId === 1 || question.quesTypeId === 2 || question.quesTypeId === 5) && question.answer.length === 0) { isSubmit = false message = '請(qǐng)?jiān)O(shè)置客觀題選項(xiàng)' 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怎么創(chuàng)建一個(gè)試卷了,如果剛好有類(lèi)似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。