Vue+Element UI完成新建调查问卷

最新推荐文章于 2025-01-08 22:29:59 发布

可狗可乐

最新推荐文章于 2025-01-08 22:29:59 发布

阅读量2.5k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43773218/article/details/127570732

版权

博客展示了前端实现添加填空题、单选题、多选题，以及对新增题目进行上移、下移、编辑、删除操作的效果，并给出了实现代码，涉及Vue.js和JavaScript技术。

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

先看看效果图：

添加填空题：

添加单选题、多选题：

对新增的题目可以上移、下移、编辑、删除操作：

效果大致就是这样，实现代码：

<template>
    <div class="container">
      <el-form ref="form" :model="form" label-width="80px" style="margin-top:15px ;">
        <el-form-item label="标题">
          <el-input v-model="name" style="width:95% ;"></el-input>
        </el-form-item>
        
  
        <!-- 遍历已创建的选项渲染 -->
        <div class="item" v-for="(item, index) in form.itemList" :key="index">
          <el-form-item >
            <div class="item_title">
            <span style="font-size:14px ;color:#666666">{
  {index+1}}.{
  {item.problemName}}  </span>
            <span style="font-size: 14px;color:#cccccc">({
  {typeMap[item.problemType]}})： </span>
          </div>
            <!-- 单项填空 -->
            <div v-if="item.problemType==='填空题'">
              <el-input class="disabled"  disabled></el-input>
            </div>
            <!-- 单选 -->
            <div v-else-if="item.problemType==='单选题'">
              <div class="warp" v-for="(elm, i) in item.problemAnswer" :key="i">
                <el-radio :label="(i+1)+'、'+elm" style="margin-bottom: 10px;"></el-radio>
                <!-- <el-input v-model="item.problemAnswer[i]" disabled></el-input> -->
              </div>
            </div>
            
            <!-- 多选 -->
            <div v-else-if="item.problemType==='多选题'">
              <div class="warp" v-for="(elm, i) in item.problemAnswer" :key="i">
                <el-checkbox :label="(i+1)+'、'+elm" ></el-checkbox>
                <!-- <

最低0.47元/天解锁文章