element动态生成单选框，多选框

谁借莪１个温暖的怀抱￠ 2022-10-07 09:51 275阅读 0赞

<template>
      <div class="demo">
        <div>
          <ul>
            <li v-for="(item, index) in questionList" :key="index" style="margin-top: 20px; padding: 20px; border: 1px solid #666">
              <div style="display: flex; align-items: center">
                <div>题目类型：</div>
                <el-select v-model="item.questionType">
                  <el-option label="输入" :value="0" />
                  <el-option label="单选" :value="1" />
                  <el-option label="多选" :value="2" />
                </el-select>
              </div>
              <div style="margin-top: 10px">问题：{
       { item.question }}</div>
              <el-button v-if="item.questionType !== 0" @click="showDialog(index)">新增选项</el-button>
              <div>
                <div v-for="(op, i) in item.options" :key="i" style="display: flex; align-items: center; margin-top: 10px; ">
                  <div style="margin-right: 10px; padding: 10px; width: 300px; background: #999; cursor: pointer" >
                    <span>{
       { op.id }}</span>
                    <span style="margin-left: 10px">{
       { op.text }}</span>
                  </div>
                  <el-button type="danger" @click="delOptoin(index, i)">删除</el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <el-dialog
          :visible.sync="showDialogVisible"
        >
          <div>
            <el-input v-model="dialogText" placeholder="请输入选项" />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmOption">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
        data() {
          return {
            questionList: [
              {
                question: '这是单选问题一',
                questionType: 0, // 0输入 1单选 2多选
                options: [
                  {
                    id: '0',
                    text: '选项一'
                  },
                  {
                    id: '1',
                    text: '选项二'
                  }
                ]
              },
              {
                question: '这是单选问题二',
                questionType: 0, // 0输入 1单选 2多选
                options: []
              }
            ],
            editIndex: 0,
            showDialogVisible: false,
            dialogText: '',
          }
        },
        watch: {
          selectVal(newVal) {
            if (newVal === '1') {
              this.showQuestion = true
            }
          }
        },
        methods: {
          /**
           * 选择单选 弹框
           */
          showDialog(i) {
            this.editIndex = i
            this.dialogText = ''
            this.showDialogVisible = true
          },
          /**
           * 增加选项
           */
          confirmOption() {
            const options = this.questionList[this.editIndex].options
            options.push(
              {
                id: options.length,
                text: this.dialogText
              }
            )
            this.showDialogVisible = false
          },
          /**
           * 删除选项
           */
          delOptoin(index, i) {
            const options = this.questionList[index].options
            options.splice(i, 1)
          }
        }
      }
    </script>
    <style lang="scss" scoped>
    .demo {
      padding: 200px 100px;
      ul,li {
        list-style: none;
      }
    }
    </style>