vue动态表单添加表单验证

            <el-form ref="conditionListForm" :rules="ConditionListRules" :model="scope.row.conditionListForm">
              <el-table
                ref="conditionListDia"
                :data="scope.row.conditionListForm.conditionListDia"
                border
                :header-cell-style="background"
                style="width: 100%"
                size="mini"
              >
                <el-table-column label="限制条件名称" align="center">
                  <el-table-column
                    label="条件组合"
                    align="center"
                    size="mini"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionRelation' " :rules="ConditionListRules.conditionRelation">
                        <el-select
                          v-model="scopeChild.row.conditionRelation"
                          :disabled="scope.row.conditionListForm.conditionListDia.length > 1 || scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="showconditionRelation(scopeChild.row.conditionRelation)"
                        >
                          <el-option
                            v-for="item in compositionConditionList"
                            :key="item.key"
                            :disabled="item.baseDataStatus==='0'"
                            :label="item.label"
                            :value="item.key"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件分组"
                    size="mini"
                    align="center"
                    min-width="30"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].medalConditionClassname' " :rules="ConditionListRules.medalConditionClassname">
                        <el-select
                          v-model="scopeChild.row.medalConditionClassname"
                          :disabled="scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="defDataClick(scopeChild)"
                        >
                          <el-option
                            v-for="item in fatherNameList"
                            :key="item.id"
                            :label="item.medalConditionClassname"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件"
                    size="mini"
                    align="center"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionId' " :rules="ConditionListRules.conditionId">
                        <el-select
                          v-model="scopeChild.row.conditionId"
                          size="mini"
                          :disabled="scope.row.id > 0"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="getRelationship(scopeChild.row.conditionId,scopeChild.row.medalConditionClassnameList,scopeChild.row)"
                        >
                          <el-option
                            v-for="item in scopeChild.row.medalConditionClassnameList"
                            :key="item.defId"
                            :label="item.medalConditionName"
                            :value="item.defId"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="运算关系"
                  align="center"
                  size="mini"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionOperation' " :rules="ConditionListRules.conditionOperation">
                      <el-select
                        v-model="scopeChild.row.conditionOperation"
                        size="mini"
                        placeholder="请选择"
                        :disabled="scope.row.id > 0"
                        clearable
                        style="float:left;width:95%"
                        @change="conditionOperationEmpty(scopeChild.row)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionOperationValueList"
                          :key="item.key"
                          :disabled="item.baseDataStatus==='0'"
                          :label="item.value"
                          :value="item.key"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="值"
                  align="center"
                  size="mini"
                  min-width="120"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '0'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-select
                        v-model="scopeChild.row.conditionTrueValueList"
                        multiple
                        style="float:left;width:95%"
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '1'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input
                        v-model="scopeChild.row.conditionValue"
                        clearable
                        placeholder="请输入"
                        align="center"
                        style="float:left;"
                        size="mini"
                        maxlength="60"
                        show-word-limit
                        @blur="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '2'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-date-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        size="mini"
                        end-placeholder="结束日期"
                        style="float:left;width:95%"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '3'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-select
                        v-model="scopeChild.row.conditionValue"
                        style="float:left;width:95%"
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '4'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-time-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        style="float:left;width:95%"
                        size="mini"
                        is-range
                        clearable
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        format="HH:mm"
                        @change="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '5'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input-number v-model="scopeChild.row.conditionValue" size="mini" :min="0" label="" @change="conditionValueEmpty(scope)" />
                    </el-form-item>

                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-button type="text" :disabled="scope.row.id > 0" @click="delCondition(scope.$index,scope.row.conditionListForm.conditionListDia,scopeChild.row,scopeChild.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>




 ConditionListRules: {
    conditionRelation: [
      { required: true, message: '条件组合不能为空', trigger: 'change' }
    ],
    medalConditionClassname: [
      { required: true, message: '条件分组不能为空', trigger: 'change' }
    ],
    conditionId: [
      { required: true, message: '条件不能为空', trigger: 'change' }
    ],
    conditionOperation: [
      { required: true, message: '运算关系不能为空', trigger: 'change' }
    ],
    conditionValue: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ],
    conditionTrueValueList: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ]
  },

主要就是prop的问题,prop要对应到数据。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值