美文网首页
elementui 动态表单问题

elementui 动态表单问题

作者: daozun | 来源:发表于2021-07-24 15:02 被阅读0次

    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 都要加上,要不然验证加不上。

    相关文章

      网友评论

          本文标题:elementui 动态表单问题

          本文链接:https://www.haomeiwen.com/subject/fjfvmltx.html