vue编写问卷调查表（包含单选，多选，文本输入，时间输入的选择题）

本文链接：https://blog.csdn.net/qq_45061876/article/details/129157257

该文展示了如何利用ElementUI组件库构建一个包含模板管理、表单输入、内容编辑和操作功能的页面，包括模板名称、类型选择、模板说明以及多种类型的内容编辑（如单选、多选、日期和文本输入）。用户可以编辑已有内容，新增内容并进行上移、下移等操作，最后通过表单提交数据。

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

实现的效果大概是这个样子

实现的过程比较简单，调用element ui组件库

<template>
    <div class="mod-menu-home app-container">
        <div class="header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/nursing/template' }">模板管理</el-breadcrumb-item>
                <el-breadcrumb-item>{
  { title }}模板</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="模板名称：" prop="name">
                <el-input v-model="ruleForm.name" style="width:60%" placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item label="模板类型：" prop="dynamicformTypeId">
                <el-select v-model="ruleForm.dynamicformTypeId" placeholder="请选择模板类型" style="width:60%;">
                    <el-option :label="item.name" :value="item.id" v-for="item in typeList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模板说明：" prop="remark">
                <el-input v-model="ruleForm.remark" style="width:60%" placeholder="请填写模板说明（200字以内）" type="textarea"
                    :rows="4"></el-input>
            </el-form-item>
            <el-form-item label="模板内容：">
                <el-button plain @click="dialogVisible = true">+新增内容</el-button>
                <ol>
                    <li v-for="(item, index) in questionList" :key="item.id">
                        <dl v-if="item.type == 'radio'">
                            <dt :class="item.require ? 'require' : ''">{
  { item.title }}</dt>
                            <el-radio v-model="radio" :label="index" v-for="(item, index) in item.questionItem"
                                :key="index">{
  { item.content }}</el-radio>
                        </dl>
                        <dl v-if="item.type == 'checkbox'">
                            <dt :class="item.require ? 'require' : ''">{
  { item.title }}</dt>
                            <el-checkbox-group v-model="checkList" v-for="(item, index) in item.questionItem" :key="index">
                                <el-checkbox :label="item.content"></el-checkbox>
                            </el-checkbox-group>
                        </dl>
                        <dl v-if="item.type == 'datetime'">
                            <dt :class="item.require ? 'require' : ''">{
  { item.title }}</dt>
                            <el-date-picker v-model="value1" type="