element-ui el-form 某一值为数组,各项必填验证


<template>
  <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          size="small"
          class="demo-ruleForm"
        >
          <el-form-item label="问题" prop="question">
            <el-input
              v-model="ruleForm.question"
              maxlength="30"
              clearable
              placeholder="请输入问题"
            ></el-input>
          </el-form-item>
          <div v-for="(item, index) in ruleForm.items" :key="index">
            <el-form-item
              :label="'选项' + (index + 1)"
              :prop="`items[${index}].answer`"
              :rules="{ required: true, message: '请输入答案', trigger: 'blur' }"
            >
              <el-input
                v-model="item.answer"
                maxlength="30"
                clearable
                placeholder="请输入答案"
              ></el-input>
              <el-button
                v-if="index > 0"
                type="text"
                @click="deleteItem(index)"
                size="small"
                >删除</el-button
              >
            </el-form-item>
          </div>
          <el-form-item label="">
            <el-button
              :disabled="ruleForm.items.length >= 5"
              type="text"
              @click="addItem()"
              size="small"
              icon="el-icon-plus"
              >确认添加</el-button
            >
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        question: "",
        items: [
          {
            answer: "",
          },
        ],
      },
      rules: {
        question: [{ required: true, message: "请输入问题", trigger: "blur" }],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    addItem() {
      if (this.ruleForm.items.length >= 5) return;
      this.ruleForm.items.push({
        answer: "",
      });
    },
    deleteItem(index) {
      this.ruleForm.items.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss"></style>
  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM