iview动态添加校验规则

需求分析:新增商品信息,根据后端返回的校验规则判断是否是必填项
ps:其他信息动态生成滴,整体已有一套校验规则。
其他信息为另外定义的校验
在这里插入图片描述
动态绑定prop
:prop=“item.attributeNotNull == 1? ‘skuAttributeVOS.’ + ${index} + ‘.attributeValueId’: ‘’”
官网上直接index就可以,但是我的项目里需要${index}才生效。

      <!-- 其他信息 -->
      <div class="merchant">
        <div class="title">其他信息</div>
        <Row v-if="otherInfoArr.length > 0"
             style="height: 54px"
             :xs="{ span: 24 }"
             :sm="{ span: 24 }"
             :md="{ span: 12 }"
             :lg="{ span: 12 }"
             :xl="{ span: 8 }"
             :xxl="{ span: 6 }">
          <Col style="height: 54px"
               :xs="{ span: 24 }"
               :sm="{ span: 24 }"
               :md="{ span: 12 }"
               :lg="{ span: 12 }"
               :xl="{ span: 8 }"
               :xxl="{ span: 6 }"
               v-for="(item, index) in otherInfoArr"
               :key="index">
          <FormItem v-if="item.objTypeName == 'select'"
                    :label="item.attributeKeyName + ': '"
                    :label-width="140"
                    :prop="
                item.attributeNotNull == 1
                  ? 'skuAttributeVOS.' + `${index}` + '.attributeValueId'
                  : ''
              "
                    :rules="skuAttributeDtosRules.attributeValueId">
            <Select v-model="item.attributeValueId"
                    filterable
                    placeholder="请选择"
                    :disabled="flag == 'look'"
                    clearable>
              <Option v-for="(per, index1) in item.valueList"
                      :value="per.id"
                      :key="index1">{{ per.value }}</Option>
            </Select>
          </FormItem>
          <FormItem :label="item.attributeKeyName + ':'"
                    v-if="item.objTypeName == 'text'"
                    :label-width="140"
                    :prop="
                item.attributeNotNull == 1
                  ? 'skuAttributeVOS.' + `${index}` + '.attributeValue'
                  : ''
              "
                    :rules="skuAttributeDtosRules.attributeValue">
            <Row type="flex">
              <Input v-model.trim="item.attributeValue"
                     placeholder="请输入"
                     :class="item.measuermentType !== '-1'?'w50':'w100'"
                     :maxlength="item.lengthLimit"
                     :disabled="flag == 'look'" />
              <Select v-model="item.attributeValueUnitId"
                      filterable
                      placeholder="请选择"
                      clearable
                      style="width: 50%"
                      :disabled="flag == 'look'"
                      v-if="item.measuermentType !== '-1'">
                <Option v-for="(item, index) in otherList(index)"
                        :value="item.id"
                        :key="index">{{ item.name }}</Option>
              </Select>
            </Row>
          </FormItem>
          <FormItem v-if="item.objTypeName == 'textarea'"
                    :prop="item.attributeNotNull == 1
                  ? 'skuAttributeVOS.' + `${index}` + '.attributeValue'
                  : ''
              "
                    :rules="skuAttributeDtosRules.attributeValue"
                    :label="item.attributeKeyName + ':'"
                    :label-width="140">
            <Input v-model.trim="item.attributeValue"
                   type="textarea"
                   :maxlength="item.lengthLimit"
                   :disabled="flag == 'look'"
                   :autosize="{minRows: 2,maxRows: 5}"
                   placeholder="请输入" />
          </FormItem>
          </Col>
        </Row>
        <div style="margin-left: 40px"
             v-else>暂无数据</div>
      </div>

data里面需要定义校验的名字和规则

data:{
      skuAttributeDtosRules: {
        attributeValue: [
          {
            required: this.flag != 'look',
            message: '请输入内容,不能为空哦',
            trigger: 'blur',
          },
        ],
        attributeValueId: [
          {
            required: this.flag != 'look',
            message: '请选择一项内容,不能为空哦',
            trigger: 'change',
          },
        ],
      },
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值