vue用elementui实现一个设计调查问卷问题的功能

下面是一个使用Vue和ElementUI实现问卷设计功能的示例：

首先，安装ElementUI库：

npm install element-ui

然后，在Vue组件中引入ElementUI：

<template>
  <div class="survey-designer">
    <el-form :model="form" ref="form" label-width="100px">
      <el-form-item label="问题类型">
        <el-radio-group v-model="form.type">
          <el-radio-button label="single">单选题</el-radio-button>
          <el-radio-button label="multiple">多选题</el-radio-button>
          <el-radio-button label="text">文本题</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题目">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="选项" v-if="form.type !== 'text'">
        <el-button type="primary" @click="addOption">添加选项</el-button>
        <el-button type="danger" @click="removeOption">删除选项</el-button>
        <el-row v-for="(option, index) in form.options" :key="index">
          <el-col :span="18">
            <el-input v-model="option.label"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="option.value"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'SurveyDesigner',
  data() {
    return {
      form: {
        type: 'single',
        title: '',
        options: [{ label: '', value: '' }]
      }
    };
  },
  computed: {
    ...mapState(['surveys'])
  },
  methods: {
    addOption() {
      this.form.options.push({ label: '', value: '' });
    },
    removeOption() {
      this.form.options.pop();
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const survey = {
            type: this.form.type,
            title: this.form.title,
            options: this.form.options.filter(option => {
              return option.label !== '' && option.value !== '';
            })
          };
          this.$store.commit('addSurvey', survey);
          this.$message.success('添加成功');
          this.resetForm();
        } else {
          this.$message.error('表单验证失败');
        }
      });
    },
    resetForm() {
      this.form.type = 'single';
      this.form.title = '';
      this.form.options = [{ label: '', value: '' }];
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style>
.survey-designer {
  margin: 20px;
}
</style>

在上面的代码中，我们使用了ElementUI的表单、单选框、输入框、按钮等组件来实现问卷设计的功能。用户可以选择问题类型（单选题、多选题或文本题）、输入题目和选项，并提交表单。

在提交表单时，我们使用了Vuex来保存问卷数据，并使用ElementUI的消息提示组件来显示添加成功或表单验证失败的消息。同时，我们还提供了重置表单的功能。

这是一个简单的问卷设计功能示例，你可以根据实际需求进行修改和扩展。