elementUI 用了 动态增减表单时，给prop报错

或者：

el-form-item 设置 prop 报错：please transfer a valid prop path to form item!

解决方法：

我的数组是这样的：

  dialogFormData: {
        nodes: [
          {
            value: '',
          },
        ],
}

我的html里是这样的

 :prop="'nodeArr.' + i + '.value'"

就是nodes 要和 nodeArr 对应 要写成一样的，就不会报错了。

图示：

如果下面的value 改成了 url 那上面也要改成url。

点击加号增加：

 this.dialogFormData.nodes.push({
        url: '',
      });

点击减号减少：

 if (i != 0) {
        this.dialogFormData.nodes.splice(i, 1);
      }

以下 2025年10月31日 更新内容

prop 的格式是这样的

// 我的数据结构是这样
const form = {
  name:'xx',
  childrenList:[
    {
       productId:''
    }
  ]
}
   

<!--    我的循环是这样      -->
   v-for="(formItem, formIndex) in form.childrenList"
   :key="formIndex"

我的字段是 productId 的话

那么我的prop规则是

"form里数值的变量名的字符串 + 。 + for 循环里的下标 + 。 + 当前绑定的变量名的字符串"

// 下面是最终展示

"childrenList" + '.' + formIndex + '.' + 'productId'

<!--    在页面里展示就是这样      -->
 <el-form-item
                :prop="'childrenList.' + formIndex + '.productId'"
                :rules="{
                  required: true,
                  message: '请选择产品品名',
                  trigger: 'change'
                }"
                label="产品品名"
              >
                <el-select
                  v-model="formItem.productId"
                  placeholder="请选择渠道"
                >
                  <el-option
                    v-for="(item, index) in productList"
                    :key="index"
                    :label="item.productName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>