elementui 点击根据是单选框还是多选框实现的一个效果

超、凢脫俗 2022-10-07 10:50 164阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70_pic_center]

<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-option label="多选" :value="3" />
                </el-select>
              </div>
              <div style="margin-top: 10px">问题：{ {  item.question }}</div>
              <el-button v-if="item.questionType === 2" @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" >
                    <div>
                      <span>{ {  op.id }}</span>
                      <span style="margin-left: 10px">{ {  op.text }}</span>
                    </div>
                    <div style="margin-left: 50px; color:#CCC">
                      <div v-for="(child, childIndex) in op.children" :key="child.id">
                        <span style="display: inline-block; width: 150px">{ {  child.text }}</span>
                        <el-button type="danger" @click="delChildOptoin(index, i, childIndex)">删除</el-button>
                      </div>
                    </div>
                  </div>
                  <el-button type="danger" @click="delOptoin(index, i)">删除</el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <el-dialog
          :visible.sync="showDialogVisible"
          width="30%"
        >
          <ul>
            <li>
              <span>选项：</span>
              <el-input v-model="dialogText" placeholder="请输入选项内容" />
            </li>
            <li>
              <span>类型：</span>
              <el-select v-model="dialogOptionType">
                <el-option v-for="(item, i) in optionsTypeList" :key="i" :label="item" :value="i" />
              </el-select>
            </li>
            <el-button v-if="dialogOptionType === 2" @click="addOption">新增选项</el-button>
            <template v-for="(item, i) in dialogOptionChildren">
              <el-input v-model="item.text" placeholder="请输入选项" />
            </template>
    
            
          </ul>
          <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: 2, // 0 无 1输入 2单选 3多选
                options: [
                  { 
                    id: '0',
                    text: '选项一'
                  },
                  { 
                    id: '1',
                    text: '选项二'
                  }
                ]
              },
              { 
                question: '这是单选问题二',
                questionType: 0, // 0 无 1输入 2单选 3多选
                options: []
              }
            ],
            optionsTypeList: ['无', '输入', '单选', '多选'],
            editIndex: 0,
            editOptionIndex: 0,
            showDialogVisible: false,
            dialogText: '',
            dialogOptionType: 0,
            dialogOptionChildren: []
          }
        },
        watch: { 
          selectVal(newVal) { 
            if (newVal === '1') { 
              this.showQuestion = true
            }
          }
        },
        methods: { 
          /**
           * 选择单选 弹框
           */
          showDialog(i) { 
            this.editIndex = i
            this.dialogText = ''
            // this.dialogOptionChildren = this.questionList[this.editIndex].options
            this.dialogOptionChildren = []
            this.showDialogVisible = true
          },
          /**
           * 添加二级选项
           */
          addOption() { 
            const options = this.dialogOptionChildren
            options.push({ 
              id: options.length,
              text: ''
            })
          },
          /**
           * 删除二级选项
           */
          delChildOptoin(index, i, childIndex) { 
            const options = this.questionList[index].options[i].children
            options.splice(childIndex, 1)
          },
          /**
           * 增加选项
           */
          confirmOption() { 
            const options = this.questionList[this.editIndex].options
            options.push(
              { 
                id: options.length,
                text: this.dialogText,
                optionType: this.optionsTypeList[this.dialogOptionType],
                children: this.dialogOptionChildren
              }
            )
            this.showDialogVisible = false
            console.log(this.questionList)
          },
          /**
           * 删除选项
           */
          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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/a0a92d1c7cb8401486be232e6a806403.png