ElementUI动态增减表单项

需要实现的效果

单选

多选

表单代码

<el-form ref="ruleForm" refs="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
      <div>
        <el-form-item label="答案" prop="answer">
          <el-radio-group v-model="formData.answer">
            <el-radio v-for="(domain, index) in formData.optionsList" :label="option[index + 1]">{{'选项'+option[index +
              1]}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in formData.optionsList"
          :label="'选项' + option[index + 1]"
          :key="domain.key"
          :prop="'optionsList.' + index + '.value'"
          :rules="{
            required: true, message: '选项不能为空', trigger: 'blur'
          }"
        >
          <el-row type="flex" align="bottom">
            <el-input style="width: 500px" v-model="domain.value"></el-input>
            <span class="el-icon-remove-outline"
                  style="margin-left: 20px;font-size: 28px;"
                  @click.prevent="removeDomain(domain, option[index + 1])"></span>
          </el-row>
        </el-form-item>

        <el-form-item label=" ">
          <el-button class="el-icon-plus" style="width: 400px;cursor: pointer; border: 1px dashed  #dcdfe6"
                     @click="addDomain" plain>增加新选项
          </el-button>
        </el-form-item>
      </div>

      <div>
        <el-form-item label="答案" prop="answers">
          <el-checkbox-group v-model="formData.answers">
            <el-checkbox v-for="(domain, index) in formData.optionsList" :key="'do'+index" :label="option[index + 1]">
              {{'选项'+option[index + 1]}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in formData.optionsList"
          :label="'选项' + option[index + 1]"
          :key="domain.key"
          :prop="'optionsList.' + index + '.value'"
          :rules="{
          required: true, message: '选项不能为空', trigger: 'blur'
        }"
        >
          <el-row type="flex" align="bottom">
            <el-input style="width: 500px" v-model="domain.value"></el-input>
            <span class="el-icon-remove-outline"
                  style="margin-left: 20px;font-size: 28px;"
                  @click.prevent="removeDomain(domain, option[index + 1])"></span>
          </el-row>
        </el-form-item>

        <el-form-item label=" ">
          <el-button class="el-icon-plus" style="width: 400px;cursor: pointer; border: 1px dashed  #dcdfe6"
                     @click="addDomain" plain>增加新选项
          </el-button>
        </el-form-item>
      </div>
    </el-form>

script代码

const option = { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F', 7: 'G', 8: 'H', 9: 'I', 10: 'J', 11: 'K', 12: 'L', 13: 'M', 14: 'N', 15: 'O', 16: 'P', 17: 'Q', 18: 'R', 19: 'S', 20: 'T', 21: 'U', 22: 'V', 23: 'W', 24: 'X', 25: 'Y', 26: 'Z' }
export default {
  data() {
    return {
      option: option, //选项
      formData: {
        answer: '', //答案
        answers: [],  //答案集合 多选使用
        optionsList: [], //选项集合
      },
      rules: {
        answer: [
          { required: true, message: '答案不能为空', trigger: 'change'
          }
        ],
        answers: [
          { required: true, message: '答案不能为空', trigger: 'change'
          }
        ],
        options:[
          { required: true, message: '选项不能为空', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    //移除选项 value 是选项 A B C D具体的某一项
    removeDomain(item, value) {
      //将选项归位
      let index = this.formData.optionsList.indexOf(item);
      if (index !== -1) {
        this.formData.optionsList.splice(index, 1);
      }
      //将keys归位
      for (let i = 0; i < this.formData.optionsList.length; i++) {
        this.formData.optionsList[i].keys = option[i + 1];
      }
      /*
          将答案归位
            单选: this.formData.answer  字符串
            多选: this.formData.answers 数组
            this.formData.questionType 是题库类型 单选 or 多选 
            因为单选存储的是字符串 多选存储得是数组 根据自己的要求设置即可
       */
      if (this.formData.questionTypes == 1){
        if (this.formData.answer == value){
          this.formData.answer = '';
        }
      }else if (this.formData.questionTypes == 2){
        let indexs = this.formData.answers.indexOf(value);
        if (indexs != -1){
          this.formData.answers.splice(indexs, 1);
        }
      }
    },
    addDomain() {
      this.formData.optionsList.push({
        value: '',
        keys: option[ this.formData.optionsList.length + 1]    //keys是为了用户选择答案进行比较
      });
    }
  }
}
</script>