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-bodywidth="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.radioBtnthis.showItem = true},addType(type){this.questItem.problemType = typethis.$forceUpdate();},// 增加/减少 子选项handleChange(val){this.itemText.length = val},// 确定将选项添加进列表中进行渲染determine(){this.questItem.problemType = this.radioBtnif(this.questItem.problemType=='填空题'){// 填空if(this.itemTitle == ''){this.$message('请输入选项的标题内容');return}if(this.editIndex !== '') {this.questItem.problemName = this.itemTitlethis.questItem.problemAnswer = nullthis.form.itemList.splice(this.editIndex, 1, this.questItem)this.editIndex = ''}else{this.questItem.problemName = this.itemTitle;this.questItem.problemAnswer = nullthis.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.problemTypethis.editIndex = editIndexif(item.problemType !== '填空题'){this.num = item.problemAnswer.lengththis.showItem = truethis.questItem = itemthis.itemTitle = item.problemNamethis.itemText = []this.itemText.push(...item.problemAnswer)}else{this.showItem = truethis.questItem = itemthis.itemTitle = item.problemName}},// 关闭弹窗，清空数据clearItem(){this.num = 1this.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>

Vue+Element UI完成新建调查问卷相关推荐

vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

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

Vue+Element UI完成新建调查问卷相关推荐

最新文章

热门文章