动态表单验证

   <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="需求单号" prop="id">
                <el-input v-model="ruleForm.id"></el-input>
              </el-form-item>
              <el-form-item label="申请日期" prop="time">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.time"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="申请人" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="申请部门" prop="dept">
                <el-select v-model="ruleForm.dept" placeholder="请选择申请部门">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="采购类型" prop="type">
                <el-select v-model="ruleForm.type" placeholder="请选择申请部门">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请原因" prop="reason">
                <el-input v-model="ruleForm.reason"></el-input>
              </el-form-item>

              <el-form-item label="需求日期" prop="date">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input
                  v-model="ruleForm.remarks"
                  type="textarea"
                  :rows="2"
                ></el-input>
              </el-form-item>

              <template v-for="(item, index) in ruleForm.details"> //循环数组
                <div  :key="index">  
                  <div class="line"></div>
                  <el-form-item :label="'采购明细' + (index + 1)"></el-form-item>
                  <el-form-item
                    label="物料名称"
                    :prop="'details.' + index + '.description'"  //绑定值（外圈已有ruleForm)
                    :rules="rules.description"   //验证条件
                  >
                    <el-input
                      v-model="item.description"
                      type="input"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="规格型号"
                    :prop="'details.' + index + '.model'"
                    :rules="rules.model"
                  >
                    <el-input v-model="item.model" type="input"></el-input>
                  </el-form-item>
                  <el-form-item
                      label="材质/品牌"
                      :prop="'details.' + index + '.brand'"
                      :rules="rules.brand"
                    >
                      <el-input v-model="item.brand" type="input"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="数量"
                      :prop="'details.' + index + '.number'"
                      :rules="rules.number"
                    >
                      <el-input v-model="item.number" type="input"></el-input>
                    </el-form-item>
                    <el-form-item
                      label="单位"
                      :prop="'details.' + index + '.company'"
                      :rules="rules.company"
                    >
                      <el-input v-model="item.Company" type="input"></el-input>
                    </el-form-item>
                    <el-form-item
                      :prop="'details.' + index + '.imgUrl'"
                      :rules="rules.imgUrl"
                    >
                      <upload v-model="item.imgUrl"></upload>
                    </el-form-item>
                </div>
              </template>

              <button class="add" @click="addmx" type="button">+添加明细</button>
            </el-form>






 ruleForm: {
        id: "",
        time: "",
        name: "",
        dept: "",
        date: "",
        type: "",
        reason: "",
        remarks: "",
        details: [
          {
            description: "",
            company: "",
            number: "",
            brand: "",
            model: "",
            imgUrl: "",
          },
        ],
      },
      rules: {
        id: [{ required: true, message: "请输入", trigger: "blur" }],
        date: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        time: [{ required: true, message: "请选择", trigger: "change" }],
        dept: [{ required: true, message: "请选择", trigger: "change" }],
        type: [{ required: true, message: "请选择", trigger: "change" }],
        reason: [{ required: true, message: "请选择", trigger: "change" }],
        remarks: [{ required: true, message: "请选择", trigger: "change" }],
        imgUrl: [{ required: true, message: "请选择", trigger: "change" }],
        description: [{ required: true, message: "请选择", trigger: "change" }],
        company: [{ required: true, message: "请选择", trigger: "change" }],
        number: [{ required: true, message: "请选择", trigger: "change" }],
        brand: [{ required: true, message: "请选择", trigger: "change" }],
        model: [{ required: true, message: "请选择", trigger: "change" }],
      },