element实现的一个效果

￡神魔★判官ぃ 2022-10-07 10:46 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-select v-model="questionList[editIndex].options.value">
                <el-option v-for="(item, i) in optionsList" :key="i" :label="item" :value="i" />
              </el-select>
            </li>
            <li>
              <span>类型：</span>
              <el-select v-model="questionList[editIndex].options.optionType">
                <el-option v-for="(item, i) in optionsTypeList" :key="i" :label="item" :value="i" />
              </el-select>
            </li>
            <el-button v-if="questionList[editIndex].options.optionType === 2" @click="addOption">新增选项</el-button>
            <template v-for="(item, i) in dialogOption">
              <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: []
              }
            ],
            optionsList: ['无', '输入', '是', '否'],
            optionsTypeList: ['无', '输入', '单选', '多选'],
            editIndex: 0,
            showDialogVisible: false,
            dialogOption: []
          }
        },
        watch: {
          selectVal(newVal) {
            if (newVal === '1') {
              this.showQuestion = true
            }
          }
        },
        methods: {
          /**
           * 选择单选 弹框
           */
          showDialog(i) {
            this.editIndex = i
            // this.dialogOption = this.questionList[this.editIndex].options
            this.dialogOption = []
            this.showDialogVisible = true
          },
          /**
           * 添加二级选项
           */
          addOption() {
            const options = this.dialogOption
            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.optionsList[options.value],
                children: this.dialogOption
              }
            )
            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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/2d3c034b13c24320ad9d9637e2416c2a.png