需求分析:新增商品信息,根据后端返回的校验规则判断是否是必填项
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',
},
],
},
}