当前位置：首页 > VUE

vue实现试题录入

2026-03-29 10:42:39VUE

Vue 实现试题录入功能

技术栈建议 Vue 2/3 + Element UI/Ant Design Vue + Axios

基础表单结构

使用 Vue 的 v-model 实现数据双向绑定：

vue实现试题录入

<template>
  <div class="question-input">
    <el-form :model="questionForm" label-width="80px">
      <el-form-item label="题型">
        <el-select v-model="questionForm.type" placeholder="请选择题型">
          <el-option label="单选题" value="single"></el-option>
          <el-option label="多选题" value="multiple"></el-option>
          <el-option label="判断题" value="judge"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="题干">
        <el-input 
          type="textarea" 
          v-model="questionForm.content"
          :rows="3">
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionForm: {
        type: '',
        content: '',
        options: []
      }
    }
  }
}
</script>

动态选项处理

根据不同题型显示不同输入项：

<template>
  <!-- 选项区域 -->
  <div v-if="['single','multiple'].includes(questionForm.type)">
    <el-button @click="addOption">添加选项</el-button>

    <div v-for="(item,index) in questionForm.options" :key="index">
      <el-input v-model="item.text" placeholder="选项内容">
        <template #append>
          <el-checkbox v-model="item.isAnswer">正确答案</el-checkbox>
          <el-button @click="removeOption(index)">删除</el-button>
        </template>
      </el-input>
    </div>
  </div>

  <!-- 判断题特殊处理 -->
  <div v-else-if="questionForm.type === 'judge'">
    <el-radio-group v-model="questionForm.answer">
      <el-radio :label="true">正确</el-radio>
      <el-radio :label="false">错误</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
methods: {
  addOption() {
    this.questionForm.options.push({
      text: '',
      isAnswer: false
    });
  },
  removeOption(index) {
    this.questionForm.options.splice(index, 1);
  }
}
</script>

数据提交处理

通过 Axios 提交到后端 API：

vue实现试题录入

methods: {
  async submitQuestion() {
    try {
      const res = await axios.post('/api/questions', {
        ...this.questionForm,
        // 处理多选题答案
        answers: this.questionForm.options
          .filter(opt => opt.isAnswer)
          .map(opt => opt.text)
      });

      this.$message.success('提交成功');
      this.resetForm();
    } catch (error) {
      this.$message.error(error.response.data.message);
    }
  },

  resetForm() {
    this.questionForm = {
      type: '',
      content: '',
      options: []
    }
  }
}

富文本编辑器集成

如需复杂内容编辑，可集成富文本编辑器：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

components: { QuillEditor }

// 模板中使用
<quill-editor 
  v-model:content="questionForm.content" 
  contentType="html"
  theme="snow"
/>

表单验证

使用 Vue 的校验规则：

data() {
  return {
    rules: {
      content: [
        { required: true, message: '请输入题干内容', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择题型', trigger: 'change' }
      ]
    }
  }
}

// 模板中绑定
<el-form :rules="rules">
  <el-form-item prop="content">...</el-form-item>
</el-form>