我的代码只需要复制，拿到vue项目运行即可~~~

20210621202144901.png

  <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>