elementui 动态表单问题
2021-07-24 本文已影响0人
daozun
1. 问题
最近碰到一个问题,就是在 vue.js
项目中搭配 elementui
组件库中的 el-form
动态表单问题,踩了一点坑,在此记录
<el-row
v-for="(item, index) in propertyGroup"
:key="index"
>
<el-row
class="basic-info-title"
type="flex"
justify="start"
align="middle"
>
<span class="green-line"></span>
<span>{{ item.groupName }}</span>
</el-row>
<el-row
type="flex"
justify="start"
align="middle"
style="margin-bottom: 12px; flex-wrap: wrap;"
>
<el-form-item
v-for="(list, j) in item.groupProperty"
:label="list.name"
:key="j"
:prop="
'propertyGroup.' + index + '.groupProperty.' + j + '.value'
"
:rules="{
required: list.unique,
message: `${list.name}不能为空`,
trigger: 'blur'
}"
>
<el-input
v-model="list.value"
v-if="list.type === 'text'"
class="common-input input-distance"
></el-input>
</el-form-item>
</el-row>
</el-row>
重点在第二层循环 prop
绑定的问题, 'propertyGroup.' + index + '.groupProperty.' + j + '.value'
,是第一层和第二层的数组和 index
都要加上,要不然验证加不上。