rule
直接赋值到对应的el-form-item
话不多说,直接上代码:
<!-- 上面还有代码,只摘了主要代码出来 -->
<div class="flex-item-center district-list-item" v-for="(item, index) in form.districtList" :key="index">
<div class="form-wrap">
<div class="flex-item-center">
<el-form-item
label="库区名"
label-width="80px"
:prop="`districtList[${index}].districtName`"
:rules="listRules.districtName"
>
<el-input
v-model="item.districtName"
placeholder="请输入库区名"
maxlength="10"
@blur="districtNameBlur($event, index)"
/>
</el-form-item>
<el-form-item label="库区编号" :prop="`districtList[${index}].districtCode`" :rules="listRules.districtCode">
<el-input
v-model="item.districtCode"
placeholder="请输入库区编号"
maxlength="10"
@blur="districtCodeBlur($event, index)"
/>
</el-form-item>
<el-button
type="primary"
icon="el-icon-plus"
style="margin-left: 10px; margin-bottom: 22px"
circle
@click="addStorage(index)"
></el-button>
</div>
<div style="margin-left: 50px">
<div class="box-title2" v-show="item.storageList.length > 0">新增库位</div>
<div class="flex-item-center warehouse-list-item" v-for="(curr, idx) in item.storageList" :key="idx">
<div class="flex-item-center">
<el-form-item
label="库位名"
label-width="80px"
:rules="listRules2.storageName"
:prop="`districtList[${index}].storageList[${idx}].storageName`"
>
<el-input
v-model="curr.storageName"
placeholder="请输入库位名"
maxlength="10"
@blur="storageNameBlur($event, index, idx)"
/>
</el-form-item>
<el-form-item
label="库位编号"
:prop="`districtList[${index}].storageList[${idx}].storageCode`"
:rules="listRules2.storageCode"
>
<el-input
v-model="curr.storageCode"
placeholder="请输入库位编号"
maxlength="10"
@blur="storageCodeBlur($event, index, idx)"
/>
</el-form-item>
<el-button
type="warning"
icon="el-icon-minus"
style="margin-left: 10px; margin-bottom: 22px"
v-show="idx != 0"
circle
@click="delStorage(index, idx)"
></el-button>
</div>
</div>
</div>
</div>
<div class="flex-col-center" style="margin-left: 20px">
<el-button type="primary" icon="el-icon-folder-add" style="margin-bottom: 10px" @click="addDistrict">
增加
</el-button>
<el-button
type="warning"
v-show="index != 0"
icon="el-icon-folder-remove"
style="margin: 0"
@click="delDistrict(index)"
>
删除
</el-button>
</div>
</div>
<!-- 下面还有代码,只摘了主要代码出来 -->
export default {
data() {
form: {},
listRules: {
districtName: [{ required: true, message: '库区名不能为空', trigger: 'blur' }],
districtCode: [{ required: true, message: '库区编号不能为空', trigger: 'blur' }],
},
listRules2: {
storageName: [{ required: true, message: '库位名不能为空', trigger: 'blur' }],
storageCode: [{ required: true, message: '库位编号不能为空', trigger: 'blur' }],
},
}
}
亲测有效!!!
如有不足,望大家多多指点! 谢谢!