vue+element-ui创建调查问卷

使用vue+element-ui制作创建调查问卷功能；
代码如下：（只是一些简单功能）

<template><div class="container"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="标题"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="时间"><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker></el-col></el-form-item><!-- 遍历已创建的选项渲染 --><div class="item" v-for="(item, index) in form.itemList" :key="index"><el-form-item :label="(index+1)+''"><div class="item_title"><span>、{{typeMap[item.type]}}: </span><span v-text="item.title"></span></div><!-- 单项填空 --><div v-if="item.type==='input'"><el-input class="disabled" placeholder="禁止输入" disabled></el-input></div><!-- 单选 --><div v-else-if="item.type==='radio'"><div class="warp" v-for="(elm, i) in item.textList" :key="i"><el-radio :label="(i+1)+'、'"></el-radio><el-input v-model="item.textList[i]"></el-input></div></div><!-- 多选 --><div v-else-if="item.type==='checkbox'"><div class="warp" v-for="(elm, i) in item.textList" :key="i"><el-checkbox :label="(i+1)+'、'"></el-checkbox><el-input v-model="item.textList[i]"></el-input></div></div><!-- 选择填空 --><div v-else-if="item.type === 'select'"><el-select v-model="value" placeholder="请选择"><el-optionv-for="(elm, i) in item.textList" :key="i":label="item.textList[i]":value="i+''"></el-option></el-select></div><!-- 矩阵填空 --><div v-else-if="item.type==='matrix'"><div class="warp" v-for="(elm, i) in item.textList" :key="i"><span> {{item.textList[i]}}：</span><el-input class="disabled" placeholder="禁止输入" disabled></el-input></div></div><!-- 上移、下移、删除 --><div style="margin-top: 10px"><el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button><el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button><el-button @click="handleItem('del', item)">删除</el-button><el-button @click="edit(item, index)">编辑</el-button></div></el-form-item></div><!-- 添加选项 --><el-form-item><el-button @click="add('radio')">单选</el-button><el-button @click="add('checkbox')">多选</el-button><el-button @click="add('input')">单项填空</el-button><el-button @click="add('select')">选择填空</el-button><el-button @click="add('matrix')">矩阵填空</el-button></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item><!-- 添加选项弹出框 --><div class="additem"><el-dialog:title="typeMap[questItem.type]":visible.sync="showItem"width="50%"><el-form-item label="标题"><el-input v-model="itemTitle"></el-input></el-form-item><el-form-item label="添加选项" v-show="questItem.type != 'input'"><el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number></el-form-item><el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.type != 'input'"><el-input v-model="itemText[i]"></el-input></el-form-item><span slot="footer" class="dialog-footer"><el-button @click="clearItem">取 消</el-button><el-button type="primary" @click="determine">确 定</el-button></span></el-dialog></div></el-form></div>
</template>

<script>
export default{data(){return{value: '',matrixsNum: 1,num: 1,form: {itemList: [],name: '',date: ''},itemTitle: '',itemText: new Array(1),questItem: {},showItem: false,typeMap: {radio: '单选',checkbox: '多选',input: '问答',matrix: '矩阵问答',select: '选择'},editIndex: ''}},watch: {showItem() {if(!this.showItem){this.clearItem()}}},methods: {// 创建选项add(type){this.questItem.type = typethis.showItem = true},// 增加/减少 子选项handleChange(val){this.itemText.length = val},// 确定将选项添加进列表中进行渲染determine(){if(this.questItem.type=='input'){// 填空if(this.itemTitle == ''){this.$message('请输入选项的标题内容');return}if(this.editIndex !== '') {this.questItem.title = this.itemTitlethis.form.itemList.splice(this.editIndex, 1, this.questItem)this.editIndex = ''}else{this.questItem.title = this.itemTitle;this.form.itemList.push(this.questItem);}this.clearItem()}else if(this.questItem.type == 'radio' || this.questItem.type == 'checkbox' || this.questItem.type == 'matrix' || this.questItem.type == 'select'){// 单选、多选、矩阵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.title = this.itemTitle;this.questItem.textList = this.itemText;this.form.itemList.splice(this.editIndex, 1, this.questItem)this.editIndex = ''}else{this.questItem.title = this.itemTitle;this.questItem.textList = this.itemText;this.form.itemList.push(this.questItem);}this.clearItem()}},// 编辑edit(item, editIndex){this.editIndex = editIndexif(item.type !== 'input'){this.num = item.textList.lengththis.showItem = truethis.questItem = itemthis.itemTitle = item.titlethis.itemText = []this.itemText.push(...item.textList)}else{this.showItem = truethis.questItem = itemthis.itemTitle = item.title}},// 关闭弹窗，清空数据clearItem(){this.num = 1this.itemTitle = ''this.itemText = ['']this.questItem = {}this.showItem = false},// 判断上移、下移、删除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() {if(this.form.name == ''){this.$message('请输入标题内容');return}if(this.form.date == ''){this.$message('请选择时间');return}if(this.form.itemList.length == 0){this.$message('至少添加一个选项');return}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;
}
</style>

链接：https://gitee.com/td-xlb/vue-vote.git

vue+element-ui创建调查问卷相关推荐

Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于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创建调查问卷

vue+element-ui创建调查问卷相关推荐

最新文章

热门文章