0x00 概述
0x00 概述
本文主要记录VUE页面Element-UI表单校验中的多层嵌套处理。
0x01 Element-UI表单校验中多层嵌套
<el-row :gutter=20 class="with-bg" v-for="(product, idx) in productList" :key="product.id">
<el-col :span="10">
<el-form-item label="产品分类1" :prop="'productList.'+idx+'.productType'" :rules="[{required:true, message: '分类1不能为空', trigger: 'change' }]">
<el-select clearable v-model="product.productType" placeholder="请选择产品分类1">
<el-option v-for="param in getContent('PRODUCT_TYPE')"
:key="param.id"
:label="param.name"
:value="param.code"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="产品分类2" :prop="'productList.'+idx+'.subproductType'" :rules="[{required:true, message: '分类2不能为空', trigger: 'change' }]">
<el-select clearable v-model="product.subproductType" placeholder="请先选产品分类2"
@change="value => effectMonthsHandler(value, idx)"
>
<el-option
v-for="(item, index) in getContent('PRODUCT_SUB_TYPE').filter(r => r.parentParamId === (getContent('PRODUCT_TYPE').find(p => p.code === product.productType)||{}).id)"
:key="index"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2">
<a v-if="editable && productList.length > 1" class="delete-item" @click="deleteproductItem(idx)"><i class="el-icon-delete"></i></a>
</el-col>
</el-row>以上productList列表内的每个product对象有两个属性，分别为productType和subproductType；
在form-item内绑定prop，按照:prop="'productList.'+index+'.product'"方法，代码冗余切没法绑定productType和subProductType的关系
data () {
return {
...省略...
punishList: [],
...省略...
rules: {
"productList.0.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
"productList.1.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
"productList.2.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
"productList.3.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
"productList.4.productType'": [{ required: true, message: '产品分类1不能为空', trigger: 'change' }],
...省略...
"productList.0.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
"productList.1.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
"productList.2.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
"productList.3.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
"productList.4.subProductType'": [{ required: true, message: '产品分类2不能为空', trigger: 'change' }],
...省略...
},
}
},0x02 将:rules放到template内，实现动态绑定
将:rules放到template内，rules内不用在写针对productList的验证规则。
<el-form-item label="产品分类1" :prop="'productList.'+idx+'.productType'" :rules="[{required:true, message: '分类1不能为空', trigger: 'change' }]">0x03 参考
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
