zoukankan      html  css  js  c++  java
  • elementui elform 某一值为数组,各项必填验证

    <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>
      
  • 相关阅读:
    WMI介绍
    进程间通信
    回调函数(C/C++)
    漏洞名词介绍
    MD5 详解
    jQuery插件的写法
    node爬虫
    nodejs应用:文件上传
    node开发备注
    node生成自定义命令(yargs/commander)
  • 原文地址:https://www.cnblogs.com/qinshizhen/p/15602708.html
Copyright © 2011-2022 走看看