vue动态添加嵌套的单选多选题

<template>
  <div class="userInfo-edit">
    <div class="add-tab">资料编辑</div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label-width="100">
        <el-button type="primary" size="medium" @click="addSubjectBtn">
          添加题目
        </el-button>
      </el-form-item>
      <div class="list-item" v-for="(item, index) in form.list" :key="index">
        <el-button
          class="item-del"
          type="danger"
          icon="el-icon-delete"
          circle
          :disabled="form.list.length == 1"
          @click="deleteSubjectBtn(index)"
        ></el-button>
        <el-form-item
          label="题目标题"
          :prop="`list[${index}].title`"
          maxleng="100"
          :rules="[
            { required: true, message: '请输入题目标题', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model="item.title"
            placeholder="请输入题目标题"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="题目类型"
          :prop="`list[${index}].type`"
          :rules="[
            { required: true, message: '题目类型不能为空', trigger: 'change' }
          ]"
        >
          <el-radio-group v-model="item.type" size="medium">
            <el-radio :label="0">单选题</el-radio>
            <el-radio :label="1">多选题</el-radio>
            <el-radio :label="2">填空题</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="options-wrap" v-show="item.type !== 2">
          <el-button
            class="options-btn"
            type="primary"
            @click="addOptionsBtn(item)"
            >添加选项</el-button
          >
          <div
            class="options-item"
            v-for="(subItem, subIndex) in item.options"
            :key="subIndex"
          >
            <el-button
              class="item-del"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteOptionsBtn(item, subIndex)"
            ></el-button>
            <el-form-item
              label="选项内容"
              :prop="`list[${index}].options[${subIndex}].name`"
              maxleng="100"
              :rules="[
                { required: true, message: '请输入选项内容', trigger: 'blur' }
              ]"
            >
              <el-input
                v-model="subItem.name"
                placeholder="请输入选项内容"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="嵌套类型"
              :prop="`list[${index}].options[${subIndex}].type`"
              :rules="[
                {
                  required: true,
                  message: '题目类型不能为空',
                  trigger: 'change'
                }
              ]"
            >
              <el-radio-group v-model="subItem.type" size="medium">
                <el-radio :label="0">单选题</el-radio>
                <el-radio :label="1">多选题</el-radio>
                <el-radio :label="2">填空题</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 第三层选项,最多三层 -->
            <div class="last-options-wrap" v-show="subItem.type !== 2">
              <el-button class="options-btn" @click="addLastOptionsBtn(subItem)"
                >添加选项</el-button
              >
              <div
                class="options-item"
                v-for="(lastItem, lastIndex) in subItem.optionsDtoList"
                :key="lastIndex"
              >
                <el-button
                  class="item-del"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteLastOptionsBtn(subItem, lastIndex)"
                ></el-button>
                <el-form-item
                  label="选项内容"
                  :prop="
                    `list[${index}].options[${subIndex}].optionsDtoList[${lastIndex}].name`
                  "
                  maxleng="100"
                  :rules="[
                    {
                      required: true,
                      message: '请输入选项内容',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input
                    v-model="lastItem.name"
                    placeholder="请输入选项内容"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-form-item size="small">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="refResFun">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import LogoVue from "../../components/layout/components/Sidebar/Logo.vue";
import OptionsItem from "./OptionsItem";
const rules = {
  title: [
    {
      required: true,
      message: "请输入题目标题",
      trigger: "blur"
    }
  ],
  type: [
    {
      required: true,
      message: "题目类型不能为空",
      trigger: "change"
    }
  ]
};
export default {
  components: {
    OptionsItem
  },
  data() {
    return {
      rules,
      form: {
        list: [
          {
            title: "",
            type: 0,
            options: [
              {
                title: "",
                type: 0,
                optionsDtoList: []
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    // 添加题目
    addSubjectBtn() {
      let addParams = {
        title: "",
        type: 0,
        options: []
      };
      this.form.list.push(addParams);
    },
    // 删除题目
    deleteSubjectBtn(index) {
      this.form.list.splice(index, 1);
    },

    // 添加选项
    addOptionsBtn(item) {
      let addParams = {
        name: "",
        type: undefined
      };
      item.options.push(addParams);
    },
    // 添加最后一层选项
    addLastOptionsBtn(item) {
      let addParams = {
        name: "",
        type: undefined
      };
      item.optionsDtoList.push(addParams);
    },

    // 删除选项
    deleteOptionsBtn(item, subIndex) {
      item.options.splice(subIndex, 1);
    },
    // 删除最后一项的选项
    deleteLastOptionsBtn(lastItem, lastIndex) {
      lastItem.optionsDtoList.splice(lastIndex, 1);
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        console.log(this.form,33333);
      });
    },
    refResFun() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.userInfo-edit {
  padding: 30px;
  .add-tab {
    font-weight: bold;
    margin-bottom: 30px;
  }
  .list-item {
    position: relative;
    width: 1200px;
    margin-bottom: 30px;
    padding: 20px 70px 20px 0;
    border: 1px solid #eee;
    border-radius: 4px;
    .item-del {
      position: absolute;
      right: -50px;
      top: 0;
    }
  }

  .options-wrap {
    padding-left: 30px;
    .options-btn {
      margin-left: 20px;
    }
    .options-item {
      position: relative;
      margin-top: 15px;
      padding-top: 15px;
      padding-right: 15px;
      border: 1px solid #eee;
      border-radius: 4px;
    }
  }
  .last-options-wrap {
    margin-bottom: 16px;
    .options-item {
      margin-left: 16px;
    }
    .item-del{
      top: 18px;
    }
  }
}
</style>