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

这篇具有很好参考价值的文章主要介绍了Vue+Element UI完成新建调查问卷。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看看效果图:

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

添加填空题:

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

 添加单选题、多选题:

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

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

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

 效果大致就是这样,实现代码:

<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>
                <!-- <el-input v-model="item.problemAnswer[i]" disabled></el-input> -->
              </div>
            </div>
  
            <!-- 上移、下移、删除 -->
            <div style="margin-top: 15px;margin-bottom: 20px;" class="editItem">
              <el-tooltip class="item"  effect="dark" content="上移" placement="bottom">
                <i class="el-icon-upload2" @click="handleItem('up', item)" v-if="index!=0" ></i>
              </el-tooltip>
              <el-tooltip class="item"  effect="dark" content="下移" placement="bottom">
                <i class="el-icon-download" @click="handleItem('down', item)" v-show="index!=form.itemList.length-1"></i>
              </el-tooltip>
              <el-tooltip class="item"  effect="dark" content="编辑" placement="bottom">
                <i class="el-icon-edit" @click="edit(item, index)" ></i>
              </el-tooltip>
              <el-tooltip class="item"  effect="dark" content="删除" placement="bottom">
                <i class="el-icon-delete" @click="handleItem('del', item)"  ></i>
              </el-tooltip>
           
            </div>
          </el-form-item>
        </div>
  
        <!-- 添加选项 -->
        <el-form-item>
          <el-button @click="add" style="width:196px;margin-left:35%"><i class="el-icon-plus" style="margin-right: 5px;"></i>添加问题</el-button>
        </el-form-item>
  
        <div style="margin-top:50px;float: right;margin-right: 40px;">
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
        
        <!-- 添加选项弹出框 -->
        <div class="additem">
          <el-dialog
            :title="typeMap[questItem.problemType]"
            :visible.sync="showItem"
            append-to-body
            width="30%">
            <el-radio-group v-model="radioBtn" @change="addType(radioBtn)" style="margin-bottom:15px ;">
                <el-radio-button label="填空题"></el-radio-button>
                <el-radio-button label="单选题"></el-radio-button>
                <el-radio-button label="多选题"></el-radio-button>
            </el-radio-group>
            <el-form-item label="问题">
              <el-input v-model="itemTitle"></el-input>
            </el-form-item>
            <el-form-item label="添加选项" v-show="questItem.problemType != '填空题'">
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" style="width:150px ;"></el-input-number>
            </el-form-item>
            <el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.problemType != '填空题'">
              <el-input v-model="itemText[i]"></el-input>
            </el-form-item>
            <span slot="footer" class="dialog-footer">
              <el-button @click="clearItem" style="background-color:#e4e4e4 ;border-color: #e4e4e4;color: #999;">取 消</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-form>
    </div>
  </template>
<script>
    import {addQuestion} from '@/api/estate/guest/questionnaire'
  export default{
    props:{
    //触发关闭父组件弹窗
    cancelAdd:{
      type: Function,
      default:null
    },
  },
    data(){
      return{
        radioBtn:'填空题',
        value: '',
        matrixsNum: 1,
        num: 1,
        name:'',
        form: {
          itemList: [],
        },
        itemTitle: '',
        itemText: new Array(1),
        questItem: {
          problemType:'填空题'
        },
        showItem: false,
        typeMap: {
          单选题: '单选题',
          多选题: '多选题',
          填空题: '填空题',
        },
        editIndex: ''
      }
    },
    watch: {
      showItem() {
        if(!this.showItem){
          this.clearItem()
        }
      }
    },
    methods: {
      // 创建选项
      add(type){
        this.questItem.problemType = this.radioBtn
        this.showItem = true
      },
      addType(type){
        this.questItem.problemType = type
        this.$forceUpdate();
      },
      // 增加/减少 子选项
      handleChange(val){
        this.itemText.length = val
      },
      // 确定将选项添加进列表中进行渲染
      determine(){
        this.questItem.problemType = this.radioBtn
        if(this.questItem.problemType=='填空题'){
          // 填空
          if(this.itemTitle == ''){
            this.$message('请输入选项的标题内容');
            return
          }
          if(this.editIndex !== '') {
            this.questItem.problemName = this.itemTitle
            this.questItem.problemAnswer = null
            this.form.itemList.splice(this.editIndex, 1, this.questItem)
            this.editIndex = ''
          }else{
            this.questItem.problemName = this.itemTitle;
            this.questItem.problemAnswer = null
            this.form.itemList.push(this.questItem);
          }
          this.clearItem()
        }else if(this.questItem.problemType == '单选题' || this.questItem.problemType == '多选题' ){
          // 单选、多选
          if(this.itemTitle == ''){
            this.$message('请输入选项的标题内容');
            return
          }
          for (var i = 0; i < this.itemText.length; i++){
            if(this.itemText[i] == '' || this.itemText[i] == undefined){
              this.$message('请完整输入每个选项内容');
              return
            }
          }
          if(this.editIndex !== '') {
            this.questItem.problemName = this.itemTitle;
            this.questItem.problemAnswer = this.itemText;
            this.form.itemList.splice(this.editIndex, 1, this.questItem)
            this.editIndex = ''
          }else{
            this.questItem.problemName = this.itemTitle;
            this.questItem.problemAnswer = this.itemText;
            this.form.itemList.push(this.questItem);
          }
         
          this.clearItem()
        }
      },
      // 编辑
      edit(item, editIndex){
        this.radioBtn = item.problemType
        this.editIndex = editIndex
        if(item.problemType !== '填空题'){
          this.num = item.problemAnswer.length
          this.showItem = true
          this.questItem = item
          this.itemTitle = item.problemName
          this.itemText = []
          this.itemText.push(...item.problemAnswer)
        }else{
          this.showItem = true
          this.questItem = item
          this.itemTitle = item.problemName
        }
      },
      // 关闭弹窗,清空数据
      clearItem(){
        this.num = 1
        this.itemTitle = ''
        this.itemText = ['']
        this.questItem = {}
        this.showItem = false
      },
      close(){
        this.form.itemList = []
        this.name = ''
      },
      // 判断上移、下移、删除
      handleItem(val, item){
        switch(val){
          case 'up':
            this.moveUp(item);
          break;
          case 'down':
            this.moveDown(item);
          break;
          case 'del':
            this.delItem(item);
          break;
          default: 
            throw new Error("该操作不存在!")
        }
      },
      // 上移
      moveUp(item){
        let index = this.form.itemList.indexOf(item)
        this.form.itemList.splice(index, 1)
        this.form.itemList.splice(index-1, 0, item)
      },
      // 下移
      moveDown(item){
        let index = this.form.itemList.indexOf(item)
        this.moveUp(this.form.itemList[index+1])
      },
      // 删除
      delItem(item){
        let index = this.form.itemList.indexOf(item)
        this.form.itemList.splice(index, 1)
      },
      // 提交
      onSubmit() {
        this.form.itemList.unshift(
            {
              problemName:this.name,
              problemType:'问卷标题',
              problemAnswer:null
            }
          )
        if(this.name == ''){
          this.$message('请输入标题内容');
          return
        }
        if(this.form.itemList.length == 0){
          this.$message('至少添加一个选项');
          return
        }
        addQuestion(this.form.itemList).then(res=>{
          this.form.itemList = []
          this.cancelAdd()
        })
        console.log(this.form);
      }
    }
  }
  </script>
 <style lang="scss" scoped>
  .warp{
    display: flex;
    align-items: center;
  }
  .disabled{
    background: #F5F7FA;
  }
  input{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    margin: 10px 0 0;
  }
  .el-radio {
      color: #606266;
      cursor: pointer;
      margin-right: 0;
  }
  .el-radio-button{
    margin-right: 65px;
    width: 106px;
}
::v-deep .el-radio-button--medium .el-radio-button__inner {
    border-radius: 20px;
    border: 1px solid #00477d;
    height: 30px;
    padding-top: 6px;
    width: 160px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #FFFFFF;
    background-color: #00477d;
    border-color: #00477d;
    -webkit-box-shadow: -1px 0 0 0 #00477d;
    box-shadow: -1px 0 0 0 #00477d;
}
::v-deep .el-dialog{
  border-radius: 15px;
}
::v-deep  .el-dialog__body{
  padding: 10px 15px;
}
.el-input--medium {
    width: 423px;
}
.editItem i{
  font-Size:24px;
  font-weight: bold;
  color:#00477d;
  margin-right:30px ;
  cursor: pointer;
}
  </style>

 文章来源地址https://www.toymoban.com/news/detail-511480.html

 

到了这里,关于Vue+Element UI完成新建调查问卷的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

    1、自定义布局       查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图 :                                                    目标效果 :                            在实现

    2024年01月18日
    浏览(44)
  • Vue系列:Vue Element UI中,使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能

    最近在工作中有个政务大屏用到了视频播放; 技术栈是Vue2、Element UI; 要实现的功能是:使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能 具体可以按照以下步骤进行操作: 引入插件: 在Vue组件中引入Element UI的按钮组件: import { Button } from \\\'ele

    2024年02月04日
    浏览(53)
  • 基于selenium实现自动填写问卷星的问卷调查

    废话不多说,直接上解决方案: 没用用过selenium的小朋友记得先安装配置一下: 谷歌浏览器驱动的安装及selenium的安装与使用 - 知乎  防止有人不看参数说明,再写一遍: 注意:由于时间有限,目前我只做了单选和多选这两类选择题的自动填写,后续有时间的话会继续更新其

    2024年02月04日
    浏览(56)
  • 调查问卷平台哪家好?

    在如今的数字化时代,问卷调查已成为企业和组织了解顾客需求、员工满意度以及市场趋势的重要工具。然而,在众多的在线调查工具中, 为什么我们要选择Zoho Survey? 1、多种问卷题型: Zoho Survey提供丰富多样的问题类型,包括单选题、多选题、文本题、评分题等。用户可

    2024年02月11日
    浏览(41)
  • 微信小程序调查问卷案例

           通过开发一个“调查问卷”的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中。参考界面如图1所示。 步骤1 :新建一个微信小程序项目 步骤2 :在小程序项目的pages/index/index.json文件中设置导航栏

    2023年04月25日
    浏览(74)
  • 仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

    一,开发前的准备 第一步,初始化项目 创建package.json 首先,新建一个空文件夹项目,在空文件上按shift键同时鼠标右击,打开命令终端窗口 第二步,安装项目依赖 Parcel 快速部署工具,官网:https://parceljs.org/docs/ Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是

    2023年04月08日
    浏览(39)
  • 仿造问卷星--开发一套调查问卷设计工具(3/3)--完整流程

    1,定义一个结果的对象: id,name和questions分别对应问卷id,问卷名称和问卷题目。 2,结果赋值 用户点击生成问卷按钮时, 分别从id和name文本框中获取值 --赋值给resultObj 将上节课拿到的question赋值给刚刚定义的对象: 打印输出结果: json结果: 3,pretty-print-json的使用 引入

    2023年04月11日
    浏览(50)
  • 医院患者满意度调查问卷示例

    以下是一个简单的医院患者满意度调查问卷示例,供参考。请注意,实际的问卷可能需要根据医院的特定需求和目标进行定制。 个人信息(可选): 您的年龄: [填写您的年龄]岁 您的性别: [选择性别] 男性 / 女性 / 其他 1. 您在本次就诊中对医疗护理的满意度: 非常满意

    2024年02月01日
    浏览(51)
  • 求免费好用的问卷调查平台!

    在当今信息时代,了解客户需求和市场趋势对企业的发展至关重要。而问卷调查是一种常见、有效的数据收集方式。本文将介绍一款 专业好用的问卷调查工具 ——Zoho Survey。我们将从功能特点、用户体验、数据分析和安全性四个方面来探讨它为用户带来的价值。 Zoho Survey提供

    2024年02月09日
    浏览(43)
  • 调查问卷Type Form的集成

    Typeform是一家制作线上调查问卷的公司。 Muñoz 和 David Okuniev两人于2012年创作出一个更加动态、更具交互性的用户调查工具,每次只提一个问题,并且根据用户的回答为其呈现下一个问题,像和朋友间的对话一样,让用户在不知不觉中就完成了问卷。 Typeform将帮你获得有关产品

    2024年02月10日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包