el-form中嵌套表格这是对于表单中校验prop时报runtime.esm.js:1897 Error: please transfer a valid prop path to form item

vue.runtime.esm.js:1897 Error: please transfer a valid prop path to form item,该错误表示prop对应的路径书写错误

 <el-form ref="validateForm" :model="formData" :disabled="pageType==='view'" inline label-position="left">
        <div class="question-item" v-for="(item,i) in formData.questionList" :key="i">
          <div class="el-table-list" v-if="item.interestMenList && item.interestMenList.length > 0">
            <el-table ref="multipleTable" :data="item.interestMenList" border>
              <el-table-column v-for="(tabItem, index) in interestList" :key="index" :prop="tabItem.prop"
                :label="tabItem.label" :width="tabItem.width" :formatter="tabItem.formatter" align="center">
                <template slot-scope="scope">
                  <el-form-item :prop="'questionList.' + i + '.interestMenList.' + scope.$index + '.'+ tabItem.prop"
                    :rules="[{required: true, message: $t('请输入'), trigger: 'blur'}]">
                    <el-input v-model="scope.row[tabItem.prop]"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </el-form>

 <el-form-item :prop="'questionList.' + i + '.interestMenList.' + scope.$index + '.'+ tabItem.prop"
                    :rules="[{required: true, message: $t('请输入'), trigger: 'blur'}]">
                    <el-input v-model="scope.row[tabItem.prop]"></el-input>
                  </el-form-item>

该代码中 :prop的值填写的是对应必填校验字段的路径,即该字段在对象中的对应层级,数据的第一级是从有循环的第一个属性(questionList)开始 ,第二级对应的变量是(interestMenList),最后一个变量的动态的表格书写 tableItem.prop; 以此类推。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值